gpt4 book ai didi

javascript - 将 block 加载到 html5 视频中

转载 作者:搜寻专家 更新时间:2023-11-01 04:15:23 25 4
gpt4 key购买 nike

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

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

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

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

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

有人知道怎么做吗?

最佳答案

I can't find any controls of buffering in html5 video.

.buffered property HTMLMediaElement 接口(interface),以及 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>

该代码来自详细的Controlling Media with JavaScript在 Safari 开发者网站上进行指导。还有一个不错的Media buffering, seeking, and time ranges MDN 上的操作方法。


如果你真的想更直接地控制缓冲,你需要在服务器端做一些工作并使用 MediaSourceSourceBuffer接口(interface)。

Appending .webm video chunks using the Media Source API是一个很好的演示;代码片段:

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

关于javascript - 将 block 加载到 html5 视频中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32789417/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com