Таким образом, я в настоящее время создаю веб-сайт с карусели, содержащий четыре видеоролика, каждое видео запускается для игры, подключаясь к карусели Bootstrap 3 slide.bs.carousel
.
Каждое из видео встраивается в страницу следующим образом:
<video id="somevideo" class="video-js vjs-default-skin m-hide" controls preload="auto" data-setup='{ "controls": false, "autoplay": false, "preload": "auto" }'>
<source src="somevideo.mp4">
<source src="somevideo.webmhd.webm">
</video>
Теперь, учитывая ограничения, наложенные, в частности, Apple на автовоспроизведение и предварительную загрузку видео HTML5 (оба они отключены, а взаимодействие с пользователем требуется для запуска воспроизведения). Я решил опустить видео для мобильных устройств и выбрать вместо них статические изображения. Это относительно просто, поскольку все, что требуется для остановки видео наложения содержимого, - это медиа-запрос, который их скрывает.
Тем не менее, мне очень сложно предотвратить загрузку видео, а накладные расходы огромны.
Например, у меня есть скрипт, чтобы проверить, посещает ли пользователь в настоящее время с мобильного устройства, как таковое, я пробовал:
var check = false;
window.mobilecheck = function() {
// Check for mobile here
if (check === true) {
// Device is mobile
var videos = document.querySelectorAll('.video-js');
for (var i = 0; i < videos.length; i++) {
// videojs(videos[i]).destroy();
videos[i].parentNode.removeChild(videos[i]);
}
}
}
Это успешно удаляет элементы, но это нужно вызвать в DOMReady, что также означает, что ресурсы уже начинают загрузку.
Как остановить загрузку видео на мобильных устройствах? Я хотел бы найти решение, которое использует VideoJS по своей сути предпочтительно.