在哪里可以阅读信息并查看将块加载到html5视频中的示例?
设想:
1.用户开始播放大型视频。
2.应下载10-20秒的视频。
3.如果用户观看的是前10秒,则应下载下10秒。因此,如果用户仅观看视频的前9秒,则不会有任何负载。
如果我们使用这种情况,它将减少服务器负载(在某些情况下)。
例如:
尝试在YouTube上观看视频。他们是这样工作的。尝试加载一半的视频(约3分钟),然后从头开始观看。视频的其他部分只有在达到特定点(在我的情况下,在下载点之前约50秒)才会下载。
我找不到在html5视频中进行缓冲的任何控件。我也找不到在流行的基于html5的视频播放器(如VideoJs,JPlayer)中缓冲的任何控件。
有人知道该怎么做吗?

最佳答案


HTMLMediaElement界面的.buffered property以及您可以从中获得的TimeRanges object并不能直接控制缓冲,但至少可以使您对用户体验有所控制。对于使用它们的简单案例,下面是一些示例代码:

<!doctype html>
<html>
<head>
    <title>JavaScript Progress Monitor</title>
    <script type="text/javascript">
        function getPercentProg() {
            var myVideo = document.getElementsByTagName('video')[0];
            var endBuf = myVideo.buffered.end(0);
            var soFar = parseInt(((endBuf / myVideo.duration) * 100));
            document.getElementById("loadStatus").innerHTML =  soFar + '%';
        }
       function myAutoPlay() {
           var myVideo = document.getElementsByTagName('video')[0];
           myVideo.play();
       }
       function addMyListeners(){
           var myVideo = document.getElementsByTagName('video')[0];
           myVideo.addEventListener('progress', getPercentProg, false);
           myVideo.addEventListener('canplaythrough', myAutoPlay, false);
       }
    </script>
</head>
<body onload="addMyListeners()">
    <div>
        <video controls
               src="http://homepage.mac.com/qt4web/sunrisemeditations/myMovie.m4v">
        </video>
        <p id="loadStatus">MOVIE LOADING...</p>
    </div>
</body>
</html>

该代码来自Safari Developer网站上详细的Controlling Media with JavaScript指南。在MDN上还有另一种很好的Media buffering, seeking, and time ranges操作方法。

如果确实要对缓冲进行更直接的控制,则需要在服务器端做一些工作,并使用MediaSourceSourceBuffer接口(interface)。

Appending .webm video chunks using the Media Source API是一个很好的演示;代码段:

var ms = new MediaSource();
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(ms);
ms.addEventListener('sourceopen', function(e) {
  ...
  var sourceBuffer = ms.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
  sourceBuffer.appendBuffer(oneVideoWebMChunk);
  ....
}, false);

关于javascript - 将块加载到html5视频中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32789417/

10-12 12:24
查看更多