HTML5 видео с полной предварительной загрузкой в ​​JavaScript

Question

У меня есть высококачественное видео, которое я не могу сжать слишком сильно, поскольку оно станет основой для большого анализа изображений, в результате которого каждый кадр будет перерисован на холсте, а затем обработан.

Я пытаюсь предварительно загрузить все это перед воспроизведением, так как у меня не может быть остановки видео, буфера и продолжения. Могу ли я прослушать событие, которое означает, что все видео предварительно загружено до начала воспроизведения?

Вот как я это делаю в JS / jQuery:

this.canvas            = this.el.find("canvas")[0];
this.video             = this.el.find("video")[0];
this.ctx               = this.canvas.getContext("2d");
this.video.autoplay    = false;

this.video.addEventListener("play",this.draw)
this.video.addEventListener("timeupdate",this.draw)
this.video.addeventlistener("ended",this.trigger("complete",this))

Answer 1

Это загрузит все видео в JavaScript

var r = new XMLHttpRequest();
r.onload = function() {
    myVid.src = URL.createObjectURL(r.response);
    myVid.play();
};
if (myVid.canPlayType('video/mp4;codecs="avc1.42E01E, mp4a.40.2"')) {
    r.open("GET", "slide.mp4");
}
else {
    r.open("GET", "slide.webm");
}

r.responseType = "blob";
r.send();

Answer 2

canplaythrough - это событие, которое должно сработать, когда загружено достаточное количество данных, чтобы играть без буферизации.

Из команд Opera отличный (хотя, возможно, немного устаревший) ресурс Все, что вам нужно знатьо HTML5 видео и аудио

Если загрузка прошла успешно, с использованием атрибута src или элементов источника, то при загрузке данных запускаются события хода выполнения.Когда загружено достаточно данных для определения размеров и продолжительности видео, происходит событие loadedmetadata.Когда для рендеринга кадра загружено достаточно данных, происходит событие loadeddata.Когда загружаются достаточно данных для воспроизведения небольшого количества видео, происходит событие canplay.Когда браузер определяет, что он может воспроизводить все видео без остановки для загрузки дополнительных данных, происходит событие canplaythrough;это также, когда видео начинает воспроизводиться, если оно имеет атрибут автозапуска.

Обратите внимание, что событие canplaythrough не поддерживается на устройствах iOS, как указано на areweplayingyet.org: http://areweplayingyet.org/event-canplaythrough

Вы можете обойти ограничения поддержки, связав load элемент к той же функции, что и для них.

Answer 3

Надеюсь, это поможет вам

var xhrReq = new XMLHttpRequest();
xhrReq.open('GET', 'yourVideoSrc', true);
xhrReq.responseType = 'blob';

xhrReq.onload = function() {
    if (this.status === 200) {
        var vid = URL.createObjectURL(this.response);
        video.src = vid;
    }
}
xhrReq.onerror = function() {
    console.log('err' ,arguments);
}
xhrReq.onprogress = function(e){
    if(e.lengthComputable) {
        var percentComplete = ((e.loaded/e.total)*100|0) + '%';
        console.log('progress: ', percentComplete);
    }
}
xhrReq.send();

и затем, если у вашего src видео есть другой домен, вы должны обработать CORS.

Answer 4

Вы можете использовать этот красивый плагин: https://github.com/GianlucaGuarini/jquery.html5loader В его API есть событие onComplete, которое запускается, когда плагин завершает загрузку всех источников

Answer 5

До сих пор самым надежным решением, которое мы нашли, было его воспроизведение и ожидание полной загрузки буфера.

Это означает, что если видео длинное, вам придется ждать почти всю длину видео.

Это не круто, я знаю.

Хотите знать, если кто-то нашел какой-то другой магически надежный способ сделать это (в идеале, используя что-то вроде PreloadJS, которое автоматически возвращается к флэш-памяти, когда HTML5-видео не поддерживается).

Answer 6

Это работает?

video.onloadeddata = function(){
  video.onseeked = function(){
    if(video.seekable.end(0) >= video.duration-0.1){
      alert("Video is all loaded!");
    } else {
      video.currentTime=video.buffered.end(0); // Seek ahead to force more buffering
    }
  };
  video.currentTime=0; // first seek to trigger the event
};