Home/ Questions/Q 7580653
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T17:58:16+00:00

I was given the following code to use video in a canvas, but I

  • 0

I was given the following code to use video in a canvas, but I was wondering if it is possible to preload the video. Fully download, and play it when finished. Even better, how about progressively download at certain percentage, say 80%.

<!DOCTYPE html>

<html land="en">
<head>
<meta charset="utf-8">
<title>Using video in the canvas tag</title>
<script type="text/javascript">

    function init(){
        var can = document.getElementById('canvas1');
        var ctx = can.getContext('2d');

        var vid = document.createElement('video');
        vid.src = 'http://upload.wikimedia.org/wikipedia/commons/8/8c/Anthropoides_paradisea1.ogg';
        vid.autoplay = true;
        vid.loop = true;

        setInterval(function() {
            ctx.drawImage(vid, 0, 0);
        }, 60);
    }
</script>

</head>


<body onLoad="init();">
    <canvas id="canvas1" width="500" height="500"></canvas>

</body>


</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I believe you would be interested in the canplaythrough event. This fires when it looks like enough has loaded that if played back at the current rate it will be completely loaded before it is done playing.

    var vid, ctx;

function play() {
    vid.play();
    setInterval(function() {
        ctx.drawImage(vid, 0, 0);
    }, 60);
}

function init() {
    var can = document.getElementById('canvas1');
    ctx = can.getContext('2d');
    vid = document.createElement('video');
    vid.src = "http://upload.wikimedia.org/wikipedia/commons/8/8c/Anthropoides_paradisea1.ogg";
    vid.autoplay = false;
    vid.loop = true;
    vid.addEventListener("canplaythrough", play, false);
}

    Example jsFiddle

    This is a good resource for getting a handle on all the different media element events: http://www.w3.org/2010/05/video/mediaevents.html.

    • 0