javascript - HTML5 Video in Chrome not working under mp4 - Stack Overflow

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.

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.

• javascript
• html

Share Improve this question Follow asked May 31, 2012 at 18:43 MikeMike 7511 gold badge22 silver badges88 bronze badges 3

• Does it work for other video types? If so, file a bug report with Chromium. Also, I don't believe controls should appear when you copy a still image from a video element to a canvas. – apsillers Commented May 31, 2012 at 19:35
• And just to clarify, why aren't you just using the video element itself? Is it just an experiment, or do you want to be able to capture the entire video frame-by-frame? Or something else? – apsillers Commented May 31, 2012 at 19:37
• See my ment below. Doesn't appear to function under .mp4, .webm or .ogv – Mike Commented May 31, 2012 at 20:40

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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./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.