буферизация управления тегами видео javascript - PullRequest
Новая
       8

буферизация управления тегами видео javascript

0 голосов
/ 09 июня 2018

привет
я играл с js и видео тегом в html5
, и я успешно добился, чтобы искать курсор в любой момент времени, когда я хочу

, теперьзадача более сложная, я хочу контролировать буферизацию видео

как эта картинка здесь что я хочу достичь 

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 ]

0 голосов
/ 10 июня 2018

Я не знаю, возможно ли напрямую повлиять на то, что буферизовано.Я думаю, что самое близкое, что вы можете получить, это манипулировать текущей позицией видео, чтобы оно находилось в определенных зонах 

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);
0 голосов
/ 09 июня 2018

Полагаю, вы имеете в виду управление внешним видом индикатора выполнения при буферизации?

Это может быть достигнуто с помощью атрибутов 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...