javascript - servidor - Evita que los videos HTML5 descarguen los archivos en el móvil-videojs

video player web

Question

Así que actualmente estoy creando un sitio web que tiene un carrusel que contiene cuatro videos, cada video se activa para jugar al engancharse en el evento slide.bs.carousel del slide.bs.carousel Bootstrap 3.

Cada uno de los videos está incrustado en la página así:

<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>

Ahora, dadas las restricciones impuestas particularmente por Apple en la reproducción automática y la precarga de videos HTML5 (ambos están deshabilitados y se requiere la interacción del usuario para activar la reproducción). Decidí omitir los videos para dispositivos móviles y optar por imágenes estáticas. Esto es relativamente simple, ya que todo lo que se requiere para evitar que el video se superponga al contenido es una consulta de medios que los oculta.

Dicho esto, me resulta muy difícil evitar que los videos se descarguen y la sobrecarga es masiva .

Por ejemplo, tengo un script para verificar si el usuario está visitando actualmente desde un dispositivo móvil, como tal, lo he intentado:

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]);
        }
    }
}

Esto elimina con éxito los elementos, pero esto se debe llamar en DOMReady, lo que también significa que los recursos ya comienzan a descargarse.

¿Cómo evito que los videos se carguen en el móvil? Me gustaría encontrar una solución que use VideoJS de forma inherente de preferencia.

Answer 1

Basado en las sugerencias que Ian hizo amablemente, aquí está mi solución de trabajo.

En primer lugar, cambié los elementos de origen secundarios de cada video para tener un atributo data-src así:

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

Luego, después de realizar una comprobación móvil utilizando el script disponible en http://detectmobilebrowsers.com/ que modifiqué para incluir iPads, etc. (respuesta de SO relacionada aquí) simplemente usé el siguiente script para actualizar automáticamente el atributo src de cada video (si estamos en el escritorio en mi caso):

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(); 

¡Y eso es! Ya no se carga nada en los dispositivos móviles y puedo tener un control bastante granular sobre los dispositivos en los que se cargará o no.

Espero que esto ayude a alguien.

Answer 2

Una forma en que podría hacer esto es configurando los atributos src de su elemento de video través de JavaScript, y solo haciendo esto en base a una consulta de medios (usando matchMedia ).

Esto significaría que la mayor parte de su código tendría que moverse a JavaScript, sin embargo.

Por ejemplo, su HTML podría ser algo como:

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

Y luego en tu JavaScript (pseudo código aquí, no JS real):

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();
   }
}

Algo así podría funcionar para ti, aunque es posible que tengas que jugar un poco con él.