将块加载到 html5 视频中
Posted
技术标签:
【中文标题】将块加载到 html5 视频中【英文标题】：Loading chunks into html5 video 【发布时间】：2015-12-23 17:07:15 【问题描述】：在哪里可以阅读信息并查看的示例？ 场景： 1. 用户开始播放大视频。 2. 应下载 10-20 秒的视频。 3. 如果用户观看前 10 秒，则应下载接下来的 10 秒。因此，如果用户只看视频的前 9 秒，则不会有任何负载。 如果我们使用这种方案，它将减少服务器负载（在某些情况下）。 例如： 尝试在 YouTube 上观看视频。他们是这样工作的。尝试加载半个视频（约 3 分钟）并从头开始观看。直到您到达特殊点（在我的情况下，在下载点之前约 50 秒），视频的其他部分才会被下载。 我在 html5 视频中找不到任何缓冲控件。此外，我在 VideoJs、JPlayer 等流行的基于 html5 的视频播放器中找不到任何缓冲控件。 有人知道怎么做吗？
【问题讨论】：
为什么？从表面上看，这听起来可能会导致非常糟糕的用户体验。 我认为它会减少服务器负载。也许我错了。 尝试在 YouTube 上观看视频。他们是这样工作的。尝试加载半个视频（约 3 分钟）并从头开始观看。直到您到达特殊点（在我的情况下，在下载点之前约 50 秒），视频的其他部分才会被下载。 好吧，我想如果你把这些信息放在你的问题中，你可能有机会得到更好的答案。也就是说，您的问题应该理想地解释您要解决的高级问题。 【参考方案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);
【讨论】：
以上是关于将块加载到 html5 视频中的主要内容，如果未能解决你的问题，请参考以下文章