Как создавать объект видео и по событию добавлять на страницу?

Question

[Александр Nameless08]

Всем привет!

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

Возможно я не там ищу, но в сети не нашел информации о возможности создания объекта видео и добаления его на сайт по событию. То есть чтобы не грузить все видео сразу а по ховеру забирать из data-атрибута ссылку создавать объект видео и добавлять на страницу? Такое возможно? В идеале конечно создать массив с этими видео и закэшировать их в фоновом режиме предварительно

Answer 1

[Stalker_RED]

Конечно возможно.

const player = document.createElement('video');
player.src = '/path/to/file.avi');

Посмотрите подробности и примеры здесь:
https://developer.mozilla.org/ru/docs/Web/API/HTML...

Comments

[Александр Nameless08]

Ага, а чтобы вставить три формата, действовать так:

var obj,
    source;

obj = document.createElement('video');
$(obj).attr('id', 'example_video_test');
$(obj).attr('class', 'video-js vjs-default-skin');
$(obj).attr('width', '640');
$(obj).attr('data-height', '264');
$(obj).attr('controls', ' ');
$(obj).attr('poster', 'http://video-js.zencoder.com/oceans-clip.jpg');
$(obj).attr('preload', 'auto');
$(obj).attr('data-setup', '{}');

source = document.createElement('source');
$(source).attr('type', 'video/mp4');
$(source).attr('src', 'http://video-js.zencoder.com/oceans-clip.mp4');

$("#content").append(obj);
$(obj).append(source);

[Александр Nameless08]

Ну только у меня будет source1, 2,3 например и все 3 append to obj

[Stalker_RED]

Александр Nameless08, да, все правильно