将块加载到 html5 视频中答案

【问题标题】：Loading chunks into html5 video将块加载到 html5 视频中
【发布时间】：2015-12-23 17:07:15
【问题描述】：

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

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

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

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

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

有人知道怎么做吗？

【问题讨论】：

为什么？从表面上看，这听起来可能会导致非常糟糕的用户体验。
我认为它会减少服务器负载。也许我错了。
尝试在 YouTube 上观看视频。他们是这样工作的。尝试加载半个视频（约 3 分钟）并从头开始观看。直到您到达特殊点（在我的情况下，在下载点之前约 50 秒），视频的其他部分才会被下载。
好吧，我想如果你把这些信息放在你的问题中，你可能有机会得到更好的答案。也就是说，您的问题应该理想地解释您要解决的高级问题。

标签： javascript video video-streaming html5-video chunks

【解决方案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 开发者网站上的详细 Controlling Media with JavaScript 指南。 MDN 上还有另一个很好的 Media buffering, seeking, and time ranges 操作指南。

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

Appending .webm video chunks using the Media Source API 是一个很好的演示；代码sn-p：

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

【讨论】：