Ale*_*ndr 5 javascript video chunks video-streaming html5-video
在哪里可以阅读信息并查看将块加载到html5视频中的示例？
场景：
1.用户开始播放大型视频。
2.应下载10-20秒的视频。
3.如果用户观看的是前10秒，则应下载下10秒。因此，如果用户仅观看视频的前9秒，则不会有负载。
如果我们使用这种情况，它将减少服务器负载（在某些情况下）。
例如：
尝试在YouTube上观看视频。他们是这样工作的。尝试加载一半的视频（约3分钟），然后从头开始观看。视频的其他部分直到您到达特定点（在我的情况下，在下载点之前约50秒）才会下载。
我在html5视频中找不到任何缓冲控件。我也找不到在流行的基于html5的视频播放器（如VideoJs，JPlayer）中缓冲的任何控件。
有人知道怎么做吗？
我在 html5 视频中找不到任何缓冲控件。
该.buffered财产的的HTMLMediaElement接口，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 开发人员网站上详细的Controlling Media with 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);