Предварительная загрузка видео, используемого в HTML 5 canvas - PullRequest
Новая
       0

Предварительная загрузка видео, используемого в HTML 5 canvas

2 голосов
/ 03 марта 2012

Мне дали следующий код для использования видео на холсте, но мне было интересно, можно ли предварительно загрузить видео. Полностью скачать и играть в нее, когда закончите. Еще лучше, как насчет постепенной загрузки с определенным процентом, скажем, 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>

1 Ответ

0 голосов
/ 03 марта 2012

Полагаю, вас заинтересовало бы событие 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);
}

Пример jsFiddle

Это хороший ресурс для получения информации о всех событиях медиа-элементов: http://www.w3.org/2010/05/video/mediaevents.html.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...