javascript视频标签控制缓冲
javascript视频标签控制缓冲
提问于 2018-06-10 02:24:29
hi
我在玩html5中的js和video tag。
并且我成功地实现了在任何我想要的时间点寻找光标
现在任务更难了，我想控制视频的缓冲
就像这张照片，what i want to achive
my code is still looks very basic
var video_length;
var buffer_area = [
[0, 20],
[50, 75],
[80, 100]
];<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<video width='440' height='250' src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" autoplay controls poster="posterimage.jpg">
</video>
</body>
</html>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-10 10:56:59
我不知道是否有可能直接影响缓冲的内容。我认为你能得到的最接近的方法就是将视频的当前位置控制在指定的区域内
var video = document.getElementsByTagName("video")[0];
var video_length;
var buffer_area = [
[0, 20],
[50, 75],
[80, 100]
];
video.currentTime = buffer_area[0][0];
function set_time()
{
//Just in case the first number is higher than 0
if(video.currentTime < buffer_area[0][0])
{
video.currentTime = buffer_area[0][0];
}
//Make sure the current position is between the two numbers of a pair, and if not, bump it up to the next one
for(var b = 0; b < buffer_area.length - 1; b++)
{
if(video.currentTime > buffer_area[b][1] && video.currentTime < buffer_area[b + 1][0]) video.currentTime = buffer_area[b + 1][0];
}
//Stop the video if the player tries to go beyond the last number
if(video.currentTime > buffer_area[buffer_area.length - 1][1])
{
video.pause();
video.currentTime = buffer_area[buffer_area.length - 1][1];
}
}
video.addEventListener("timeupdate",set_time);
video.addEventListener("seeked",set_time);Stack Overflow用户
发布于 2018-06-10 04:21:30
我想你的意思是在缓冲时控制进度条的外观？
这可以通过视频的playing和buffered属性来完成
var video = document.getElementsByTagName("video")[0];
var bufferBar = document.getElementById("bufferBar");
var bufferRanges = document.getElementById("bufferRanges");
var progressRanges = document.getElementById("progressRanges");
video.addEventListener("progress",function()
{
bufferRanges.innerHTML = "";
for (var b = 0; b < video.buffered.length; b++)
{
var startX = video.buffered.start(b) * (440/video.duration);
var endX = video.buffered.end(b) * (440/video.duration);
var width = endX - startX;
var newRange = document.createElement("div");
newRange.className = "bufferRange";
newRange.style.left = startX + "px";
newRange.style.width = width + "px";
bufferRanges.appendChild(newRange);
}
})
video.addEventListener("timeupdate",function()
{
progressRanges.innerHTML = "";
for (var p = 0; p < video.played.length; p++)
{
var startX = video.played.start(p) * (440/video.duration);
var endX = video.played.end(p) * (440/video.duration);
var width = endX - startX;
var newRange = document.createElement("div");
newRange.className = "progress";
newRange.style.left = startX + "px";
newRange.style.width = width + "px";
progressRanges.appendChild(newRange);
}
})#bufferBar
{
width: 440px;
height: 15px;
background-color: #2c2c2c;
position: relative;
}
.bufferRange
{
height: 100%;
background-color: #636363;
display: block;
position: absolute;
}
.progress
{
height: 100%;
background-color: #e73853;
display: block;
position: absolute;
}<video width='440' height='250' src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" autoplay controls poster="posterimage.jpg">
</video>
<div id="bufferBar">
<div id="bufferRanges"></div>
<div id="progressRanges"></div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50777304
复制相关文章
相似问题