Предотвращение загрузки видео в формате HTML5 на мобильных устройствах - videojs

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

Ответы

Ответ 1

На основе предложений, которые я сделал любезно, вот мое рабочее решение.

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

<video id="my-id">    
   <source data-src="somevideo.mp4">
</video>

Затем, выполнив мобильную проверку, используя скрипт, доступный по адресу http://detectmobilebrowsers.com/, который я модифицировал, чтобы включить iPads и т.д. (Связанный ответ SO здесь), я просто использовал следующий скрипт для автоматического обновления атрибута src для каждого видео (если мы на рабочем столе в моем случае):

var sources = document.querySelectorAll('video#my-id source');
// Define the video object this source is contained inside
var video = document.querySelector('video#my-id');
for(var i = 0; i<sources.length;i++) {
  sources[i].setAttribute('src', sources[i].getAttribute('data-src'));
}
// If for some reason we do want to load the video after, for desktop as opposed to mobile (I'd imagine), use videojs API to load
video.load();

И это! На мобильных устройствах больше ничего не загружается, и я могу иметь достаточно подробный контроль над устройствами, которые он будет или не будет загружать.

Надеюсь, это поможет кому-то.

Ответ 2

Один из способов, вы можете сделать это, установив в src атрибутов вашего video элемента с помощью JavaScript, и только делать это на основе запроса медиа ( с помощью matchMedia).

Это означало бы, что основная часть вашего кода должна была бы перейти на JavaScript.

Например, ваш HTML может выглядеть примерно так:

<video data-mp4="video.mp4" data-webm="video.webm" class="video-js" controls></video>

А затем в вашем JavaScript (псевдокод здесь, а не фактический JS):

if (window.matchMedia("(min-width: 640px)").matches) {
   // do nothing
} else {
   var videos = document.querySelectorAll('.video-js'),
       videoFile;
   for (var i = 0; i < videos.length; i++) {
      // Choose video type
      if (video[i].canPlayType("video/mp4") === "probably") {
         videoFile = video[i].getAttribute("data-mp4");
      }
      // do the same check for WebM here...
      video[i].src = videoFile;
      // Call whatever reload or refresh method video.js has
      // for example...
      video[i].refresh();
   }
}

Что-то вроде этого может сработать для вас, хотя вам, возможно, придется немного поиграть с ним.