Question

我可以在哪里阅读信息并查看将块加载到html5视频中的示例？

场景：
1.用户开始播放大型视频 2.应下载10-20秒的视频 3.如果用户先观看10秒钟，则应下载下一个10秒钟。因此，如果用户仅查看视频的前9秒，则将无负载。

如果我们使用这种情况，它将减少服务器负载（在某些情况下）。

例如：
尝试在YouTube上观看视频。他们这样工作。尝试加载半个视频（约3分钟）并从头开始观看。在您到达特殊点之前（在我的情况下，在下载点之前约50秒），将不会下载视频的其他部分。

我在html5视频中找不到任何缓冲控件。此外，我在VideoJs，JPlayer等流行的基于html5的视频播放器中找不到任何缓冲控制。

有人知道怎么做吗？

Answer 1

我在html5视频中找不到任何缓冲控件。

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方法。

如果您真的想要更直接地控制缓冲，您需要在服务器端做一些工作并使用MediaSource和SourceBuffer接口。

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

将块加载到html5视频

1 个答案: