我在哪里可以阅读关于将块加载到HTML5视频中的信息和示例？
情景：
1. 用户开始播放一个大视频。
2. 应下载视频的前10-20秒。
3. 如果用户观看了前10秒，则应下载接下来的10秒。因此，如果用户只查看了视频的前9秒，则不会进行下载。
如果我们使用这种情况，它将减少服务器负载（在某些情况下）。
例如：
尝试在YouTube上观看视频。他们就是这样工作的。尝试加载一半视频（〜3分钟），并从开头开始观看。直到你到达特殊点（在我的情况下，是下载点前约50秒），才会下载视频的其他部分。
我找不到HTML5视频缓冲控件。另外，我找不到像VideoJs、JPlayer这样的流行的基于HTML5的视频播放器的缓冲控件。
有人知道怎么做吗？
将分块加载到HTML5视频中
13
- Oleksandr
4
为什么？乍一看，这似乎会导致非常糟糕的用户体验。 - sideshowbarker
我认为这会减少服务器负载。也许我错了。 - Oleksandr
3尝试在YouTube上观看视频。它们的工作方式是这样的。尝试加载一半的视频（约3分钟）并从开头开始观看。直到您到达特定点（在我的情况下为下载点前约50秒），视频的其他部分才会被下载。 - Oleksandr
好的，我认为如果您在问题中提供了这些信息，您可能会得到更好的答案。也就是说，您的问题应该清晰地解释您正在尝试解决什么高级问题。 - sideshowbarker
1个回答
10
我找不到HTML5视频中的缓冲控件。
HTMLMediaElement接口的.buffered属性以及您可以从中获取的TimeRanges对象，虽然不能直接控制缓冲，但至少可以在一定程度上控制用户体验。以下是使用它们的简单示例代码：
<!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开发人员网站上详细的JavaScript控制媒体指南。MDN还有另一个很好的媒体缓冲，寻找和时间范围教程。
如果您真的想更直接地控制缓冲，您需要在服务器端进行一些工作，并使用MediaSource和SourceBuffer接口。 使用媒体源API添加.webm视频块是一个很好的演示; 代码片段：
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);
- sideshowbarker
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接