Как остановить предварительную загрузку видео (HTML5 - Javascript)

Question

У меня есть веб-страница с видеопроигрывателем, предварительно загружающим 3 видео (низкое, среднее и высокое качество одного и того же видео). Затем, когда пользователь нажимает на кнопку, соответствующую желаемой версии, открывается видео.

Что я хотел бы сделать, так это прекратить предварительную загрузку двух других видео.

Возможно ли это? Другими словами, может ли атрибут «preload» тега HTML5 Video быть отменен или остановлен «на лету» с помощью некоторого Javascript?

Answer 1

С JQuery, вы можете попробовать:

$('#videoPlayerId').removeAttr('preload'); 

Я не знаю, что это остановит видео, которое уже предварительной загрузки.

С точки зрения пользовательского интерфейса, почему вы пытаетесь предварительно загрузить все 3 видео одновременно? Это замедлит скорость загрузки всех трех; если вы только предварительно загрузите один из них, больше видео будет иметь возможность буферизовать, прежде чем пользователь начнет его просматривать.

Я бы предложил предварительно загрузить одно из видео по умолчанию и загрузить только качественное видео, если пользователь его выбирает. Это поведение, используемое YouTube, Netflix и другими.

Answer 2

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

У меня есть элемент prebuffer div #, который содержит предварительно загруженные видео, поскольку они буферизованы. Когда мне нужно забыть о поджимать, я просто сделать это:

var $video = $('#prebuffer video:last'); 
$video.find('source').attr('src', ''); 
$video[0].load(); 
// it has now stopped preloading. 
// and then, because I don't want this half-loaded broken cruft hanging around: 
$video.remove(); 

Это немного некрасиво, но я не смог найти более хороший путь. И он выполняет свою работу.

Answer 3

Существует специальный тег в настоящее время:

<video preload="none" ....>