是否可以在播放之前預加載整個HTML5視頻源?

[英]Is it possible to preload an entire HTML5 video source before playing?


Solution

解決方案

I created a working example of the accepted answer which uses an XHR and reports loading progress through a bar.

我創建了一個可接受答案的工作示例,該示例使用XHR並通過bar報告加載進度。

It's available here.

這里的可用。

https://github.com/synthecypher/full-preload

https://github.com/synthecypher/full-preload

Question

問題

I've noticed when I create a <video> element with sources and call load() it will load to about 36% and then stops unless you play() it, at which time it'll continue to load the rest of the video as it plays.

我注意到,當我創建一個帶有source和call load()的

However, I want to ensure the entire video loaded before hand as it's an element in a timed exercise and if the internet connection drops during the exercise I will have to detect such an event and restart the exercise.

但是,我希望確保在事先加載整個視頻,因為它是一個定時練習中的一個元素,如果在練習期間互聯網連接中斷,我將不得不檢測這樣的事件並重新開始練習。

I assume this is a built in feature of the HTML5 media elements but is it possible to override this native functionality?

我假設這是HTML5媒體元素的內置特性,但是否有可能覆蓋這個本地功能?

I've attempted to load the entire video source as a arraybuffer using an XMLHttpRequest which is then converted to a blob and set as the src of a <source> element in my <video> element.

我嘗試使用XMLHttpRequest來加載整個視頻源作為arraybuffer, XMLHttpRequest被轉換為blob,並在我的

This does work however, it isn't ideal as I can't report the progress of download to the user through the use of progress bar as an XHR is a syncronous operation and will cause my JavaScript to hang until a response is received. I know XHR2 now has this funtionality but I have to support IE8+ so that's not an option.

不過,這確實有效,但並不理想,因為我不能通過使用進度條向用戶報告下載進度,因為XHR是一個同步操作,會導致JavaScript掛起,直到收到響應。我知道XHR2現在有這個功能但是我必須支持IE8+所以這不是一個選項。

Is there an easier more elegant solution to my problem, which will report progress?

對於我的問題,是否有一個更簡單、更優雅的解決方案,它將報告進展?

Requirements

需求

  • Need to preload the entire <video> element's <source> before playing.
  • 需要在播放前預加載整個
  • Need to report progress of the
  • 需要報告進度的

2 个解决方案

#1


6  

If you have the source, you can pre-download the data to a blob in javascript and play when ready.

如果您有源代碼,可以將數據提前下載到javascript中,並在准備就緒時播放。

The following should work if the video is on your server. If not, you'll run into CORS issues.

如果視頻在您的服務器上,以下內容應該有效。否則,您將遇到CORS問題。

var video = document.getElementById("Your video element id")

var url = "Some video url"

var xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.responseType = "arraybuffer";

        xhr.onload = function(oEvent) {

            var blob = new Blob([oEvent.target.response], {type: "video/yourvideosmimmetype"});

            video.src = URL.createObjectURL(blob);

            //video.play()  if you want it to play on load


    };

     xhr.onprogress = function(oEvent){

      if(oEvent.lengthComputable) {
         var percentComplete = oEvent.loaded/oEvent.total;
        // do something with this
       }
     }

    xhr.send();

#2


2  

Here is a sample to preload full video using XHR . but you need to handle CORS by yourself.

下面是使用XHR預加載完整視頻的示例。但是你需要自己處理CORS。

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();

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2015/03/03/7200c48013efeb0c1fbcdf292848aecd.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com