Question

我获得了以下代码以在画布中使用视频，但我想知道是否可以预加载视频。完全下载，完成后播放。更好的是，如何逐步下载某个百分比，比如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>

Answer 1

我相信你会对canplaythrough事件感兴趣。当它看起来已经足够加载时会触发，如果以当前速率播放它将在完成播放之前完全加载。

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

这是处理所有不同媒体元素事件的好资源：http://www.w3.org/2010/05/video/mediaevents.html。

预加载html 5画布中使用的视频

1 个答案: