将块加载到html5视频中 [英] Loading chunks into html5 video
问题描述
在哪里可以阅读信息并查看将块加载到html5视频中的示例?
场景:
1.用户开始播放大型视频.
2.应下载10-20秒的视频.
3.如果用户观看的是前10秒，则应下载下10秒.因此，如果用户仅观看视频的前9秒，则不会有负载.
如果我们使用这种情况，它将减少服务器负载(在某些情况下).
例如:
尝试在YouTube上观看视频.他们是这样工作的.尝试加载一半的视频(约3分钟)，然后从头开始观看.视频的其他部分只有在达到特定点(在我的情况下，在下载点之前约50秒)才会下载.
我找不到在html5视频中进行缓冲的任何控件.另外，在像VideoJs，JPlayer这样的流行的基于html5的视频播放器中，我也找不到任何缓冲控件.
有人知道怎么做吗?
Where I can read information and see examples of loading chunks into html5 video?
Scenario:
1. User starts play a large video.
2. 10-20 seconds of the video should be downloaded.
3. If user watches first 10 seconds then next 10 seconds should be downloaded. Thus, there will be no load if the user looks only the first 9 seconds of video.
If we use this scenario it will reduce server load (in some cases).
For example:
Try to watch video on YouTube. They work like this. Try to load half video (~3 mins) and start watch it from beginning. Other part of video will not be downloaded until you reach special point (~ 50 seconds before the downloads point, in my case).
I can't find any controls of buffering in html5 video. Also I can't find any controls of buffering in popular html5 based video players like VideoJs, JPlayer.
Does somebody know how to do it?
推荐答案
我在html5视频中找不到任何缓冲控件.
I can't find any controls of buffering in html5 video.
.HTMLMediaElement 接口的缓冲属性，以及 TimeRanges对象，它不能直接控制缓冲，但至少可以使您对用户体验有所控制.对于使用它们的简单案例，下面是一些示例代码:
The .buffered property of the HTMLMediaElement interface, and the TimeRanges object which you can get back from that, don’t give you direct control over buffering, but can give you some control over the user experience at least. For a simple case that uses them, here’s some sample code:
<!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结束.
That code is from a detailed Controlling Media with JavaScript guide over at the Safari Developer site. There’s also another good Media buffering, seeking, and time ranges how-to over at MDN.
如果您真的想更直接地控制缓冲，则需要在服务器端做一些工作，并使用 MediaSource 和 SourceBuffer 接口.
If you really want more direct control over buffering, you need to do some work on the server side and use the MediaSource and SourceBuffer interfaces.
使用Media Source API附加.webm视频块是一种良好的演示；代码段:
Appending .webm video chunks using the Media Source API is a good demo; code snippet:
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视频中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
