是否可以在播放之前预加载整个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();
智能推荐

注意!

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



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

赞助商广告