正在将块加载到 html5 视频中

Question

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

场景：
1. 用户开始播放大视频。
2. 应下载 10-20 秒的视频。
3. 如果用户观看前 10 秒，则应该下载接下来的 10 秒。因此，如果用户只看视频的前 9 秒，则不会有负载。

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

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

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

有人知道怎么做吗？

Answer 1

I can't find any controls of buffering in html5 video.

你可以从中得到的.buffered property of the HTMLMediaElement interface, and the 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>

该代码来自 MDN 上的详细 [=15=] 操作方法。

如果你真的想更直接地控制缓冲，你需要在服务器端做一些工作并使用 MediaSource and 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 视频中

Loading chunks into html5 video

javascript

video

chunks

video-streaming

html5-video