Как сделать отложенную загрузку для видео в теге video?

Question

[Evgeniy]

Привет всем!
Подскажите пожалуйста как сделать отложенную загрузку для видео?
Т.е. чтобы оно загружалось только после того, как по нему кликнут. А до этого просто черный экран

Которые прописаны в теге video:

<div class="video-block">
    <video id="my-player" class="video-js" controls data-setup='{}'>
        <source src="./video/blum/2.mp4" type="video/mp4"></source> 
    </video>
</div>

Везде только для iframe находил.. может библиотека есть какая-то?
Для видео используется проигрыватель videojs https://docs.videojs.com/
но там не нашёл ничего подобного

Comments

[Роман]

Что вы подразумеваете под отложенной загрузкой?
1. Воспроизведение видео когда когда контейнер с видео попал в область просмотра?
2. Начало загрузки видеоконтента когда контейнер с видео попал в область просмотра?

[Evgeniy]

Роман, имелось ввиду чтобы видео загружалось не вместе со страницей. А только после того, как по нему кликнут. А до этого момента, за место превью у видео просто черный экран

Answer 1

[Надим]

Примерно так:

<div onclick="this.querySelector('source').setAttribute('src', this.querySelector('source').getAttribute('data-src')); this.removeAttribute('onclick');" class="video-block">
    <video id="my-player" class="video-js" controls data-setup='{}'>
        <source data-src="./video/blum/2.mp4" type="video/mp4"></source> 
    </video>
</div>

При клике, будет добавлен атрибут src, содержимое которого взято был бы из data-src. Это простой вариант в лоб, но это конечно несколько неправильно, по уму все скрипты надо вынести во вне, а не писать инлайново.

Comments

[Evgeniy]

Вариант хороший, скрипты вынес, загрузка видео и правда стала после нажатия. Но PageSpeed почему-то всё ещё показывает что страница весит очень много из-за видео

[Надим]

Evgeniy, по правде говоря PageSpeed вообще не должен видеть это видео, так как до клика его фактически не существует. Попробуйте вот так:

<div onclick="pasteVideo('./video/blum/1.mp4');" class="video-block"></div>
<div onclick="pasteVideo('./video/blum/2.mp4');" class="video-block"></div>
<div onclick="pasteVideo('./video/blum/3.mp4');" class="video-block"></div>

<script type="text/javascript">
	function pasteVideo(link) {
		this.innerHTML = '<video class="video-js" controls data-setup="{}"><source src="'+link+'" type="video/mp4"></source></video>';
		this.removeAttribue('onclick');
	}
</script>

Видео-блоков можно сколько угодно, как пример указал их 3 штуки, а вот тег scrtipt не нужно дублировать!

[Evgeniy]

Надим Закиров, отлично, работает! Спасибо