HTML5-Videos vom Herunterladen der Dateien auf Handy verhindern - videojs

Question

Also baue ich gerade eine Website, die ein Karussell mit vier Videos hat, jedes Video wird ausgelöst, indem man sich in das Bootstrap 3 Karussell slide.bs.carousel Ereignis einklinkt.

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

Jetzt, da die vor allem von Apple auferlegten Beschränkungen für die Selbstspiele und Vorladen von HTML5-Videos (beide sind deaktiviert und Interaktion mit dem Benutzer erforderlich ist, um:

Jede der Videos sind wie so in der Seite eingebettet trigger playback) Ich habe beschlossen, die Videos für mobile & opt für statische Bilder statt. Dies ist relativ einfach, da alles, was erforderlich ist, um zu verhindern, dass das Video den Inhalt überlagert, eine Medienabfrage ist, die sie ausblendet.

Das gesagt, ich finde es sehr schwierig zu verhindern, dass die Videos heruntergeladen werden und der Aufwand ist massiv.

Zum Beispiel habe ich ein Skript zu prüfen, ob der Benutzer gerade von einem mobilen Gerät besuchen wird, als solche, die ich habe versucht:

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

Diese erfolgreich die Elemente entfernt, aber das muss sein aufgerufen auf DOMReady, was auch bedeutet, dass die Ressourcen bereits mit dem Download beginnen.

Wie kann ich das Laden von Videos auf Mobilgeräten stoppen? Ich würde gerne eine Lösung finden, die VideoJS inhärent bevorzugt verwendet.

Answer 1

Basierend auf den Vorschlägen, die Ian freundlicherweise gemacht hat, hier ist meine Arbeitslösung.

Zunächst änderte ich jedes Kind Quelle des Videoelemente data-src ein Attribut haben wie so:

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

Dann, nach einer mobilen Check mit dem Skript zur Verfügung zu http://detectmobilebrowsers.com/ ausführt, die ich geändert iPads enthalten etc (related SO answer here) I einfach verwendet das folgende Skript automatisch die src Attribut jedes Video zu aktualisieren (wenn wir auf dem Desktop in meinem Fall sind):

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

Und das ist es! Nichts wird mehr auf mobile Geräte geladen, und ich kann ziemlich genaue Kontrolle über die Geräte haben, die es laden wird oder nicht wird.

Hoffe, das hilft jemandem.

Answer 2

Eine Möglichkeit, dies tun könnte, ist durch die src Attribute Ihres video Element über JavaScript-Einstellung, und tun nur so, basierend auf einer Medienabfrage (mit matchMedia).

Dies würde bedeuten, dass der Großteil Ihres Codes jedoch in JavaScript verschoben werden müsste.

Zum Beispiel könnte Ihre HTML so etwas wie:

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

Und dann in Ihrem JavaScript (Pseudo-Code hier nicht unbedingt 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(); 
    } 
} 

So etwas könnte für Sie arbeiten obwohl du vielleicht ein bisschen damit herumspielen musst.