HTML5 Видео в Chrome не работает под mp4

Question

Я работаю над простым сайтом для показа видео на холсте. Видео отображается, но оно просто застревает в первом кадре, у меня есть набор элементов управления, и автозапуск не отображается и не воспроизводится видео.

<div style="position: absolute; top: 50px; left: 50px;"> 

<canvas id="canvasOne" width="500" height="300"> 
Your browser does not support HTML5 Canvas. 
</canvas> 
</div> 

@section Scripts 
{ 
<script src="@Url.Content("~/Scripts/modernizr-2.5.3.js")" type="text/javascript">  </script> 
<script type="text/javascript"> 
    window.addEventListener('load', eventWindowLoaded, false); 
    var firstVideo, secondVideo, videoSource 
    var videoDiv; 
    function eventWindowLoaded() { 
     firstVideo = document.createElement("video"); 
     videoSource = document.createElement("source"); 
     firstVideo.appendChild(videoSource); 
     //secondVideo = document.createElement("video"); 
     videoDiv = document.createElement('div'); 
     document.body.appendChild(videoDiv); 
     videoDiv.appendChild(firstVideo); 
     //videoDiv.appendChild(secondVideo); 
     videoDiv.setAttribute("style", "display:none;"); 
     var videoType = supportedVideoFormat(firstVideo);  
     if (videoType == "") { 
      alert("no video support"); 
      return; 
     } 
     videoSource.setAttribute("src", "/Content/QualitySample." + videoType); 
     videoSource.setAttribute("type", "video/mp4"); 
     firstVideo.setAttribute("controls", "controls"); 
     firstVideo.setAttribute("autoplay", "autoplay"); 
     firstVideo.addEventListener("canplaythrough", videoLoaded, false); 
     //secondVideo.setAttribute("src", "/Content/QualitySample." + videoType); 
     //secondVideo.setAttribute("controls", "controls"); 
     //secondVideo.addEventListener("canplaythrough", videoLoaded, false); 


    } 

    function supportedVideoFormat(video) { 
     var returnExtension = ""; 
     if (video.canPlayType("video/mp4") == "probably" || 
     video.canPlayType("video/mp4") == "maybe") { 
      returnExtension = "mp4"; 
    } else if (video.canPlayType("video/webm") == "probably" || 
    video.canPlayType("video/webm") == "maybe") { 
     returnExtension = "webm"; 
    } else if (video.canPlayType("video/ogg") == "probably" || 
    video.canPlayType("video/ogg") == "maybe") { 
     returnExtension = "ogg"; 
    } 


    return returnExtension; 

} 

function canvasSupport() { 
    return Modernizr.canvas; 
} 

function videoLoaded(event) { 

    canvasApp(); 

} 

function canvasApp() { 

    if (!canvasSupport()) { 
     return; 
    } 

    function drawScreen() { 

     //Background 
     context.fillStyle = '#ffffff'; 
     context.fillRect(0, 0, theCanvas.width, theCanvas.height); 
     //Box 
     context.strokeStyle = '#000000'; 
     context.strokeRect(5, 5, theCanvas.width - 10, theCanvas.height - 10); 
     //video 
     context.drawImage(firstVideo, 60, 50, 200, 200); 
     //context.drawImage(secondVideo, 260, 50, 200, 200); 

    } 

    var theCanvas = document.getElementById("canvasOne"); 
    var context = theCanvas.getContext("2d"); 
    //firstVideo.load(); 
    firstVideo.play(); 
    //secondVideo.play(); 
    setInterval(drawScreen, 33); 

} 

} когда страница загружает видео отображается на холсте и видео загружается, но не управляет не активны и не играют.

Answer 1

MP4 - это тип файла мультимедиа. Однако MP4 может поддерживать любое количество различных кодеков. Некоторые кодеки защищены патентами, поэтому Chrome может не использовать некоторые кодеки. Убедитесь, что Codec вашего видео поддерживается.

Смотрите также: http://news.cnet.com/8301-30685_3-20028196-264.html

Edit: я имею в виду «защищенный» в том, что Google не хочет платить взносы в поддержку кодека, не то, что Chrome не может справиться с этим кодеком.