HTML5 Video in Chrome not working under mp4

Question

I'm working on a simple site to display a video on a canvas. The video displays but it just is stuck at the first frame, I have controls set and autoplay neither show up nor does the video play.

<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);

}

} when the page loads the video is displayed on the canvas and the video is loaded but no controls are active nor does it play.

Answer 1

MP4 is a media file type. However, MP4 can support any number of different Codecs. Some Codecs are protected by patents, so Chrome might not be able to use certain Codecs. Make sure the Codec of your video is supported.

See also: http://news.cnet.com/8301-30685_3-20028196-264.html

Edit: I mean "protected" in that Google doesn't want to pay the fees to support the codec, not that Chrome couldn't handle that codec.