zeigen html5 Videos nur auf Desktop-

ich diesen Code haben, die die src Attribute der Quellen auffüllt, wenn der Benutzer nicht auf Mobil ist:zeigen html5 Videos nur auf Desktop-

if($.browser.mobile) 
    { 
     console.log("is mobile") 
     // it is mobile browser 
    } 
    else 
    { 
    console.log("is desktop") 
     // no mobile browser 
     var sources = document.querySelectorAll('video#patient-video source'); 
    // Define the video object this source is contained inside 
    var video = document.querySelector('video#patient-video'); 
    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(); 
    video.muted= "muted"; 
    }

Um zu überprüfen, ob es ein Handy-Browser ist, verwende ich das Plugin:

detectmobilebrowser.js

Mein HTML ist wie folgt:

<video id="patient-video" width="100%" preload="none" poster="../../assets/img/patient-home-1600.jpg" autoplay loop> 
      <source data-src="../../assets/video/patient-home-video-comp.mp4" src="" type="video/mp4"> 
      <source data-src="../../assets/video/patient-home-video-comp.webm" src="" type="video/webm"> 
      <source data-src="../../assets/video/patient-home-video-comp.ogv" src="" type="video/ogg"> 
      </video>

Dies ist für ein bestimmtes Video funktioniert gut, aber wie kann ich die Jav anpassen Skript, so dass es für alle Videos auf der Seite dasselbe tut.

Quelle

2016-05-30 user1937021

Sie Medienanfragen verwenden können, um die Größe des Browser- –

@BenPhilipp zu erkennen gibt es keine Notwendigkeit für jquery foreach, die OP muss nur Verwenden Sie eine Klasse anstelle einer ID –

@RachelGallen Ja. Oder ein Typ oder ein anderer gemeinsamer Nenner - was ich mit "etwas wie" meinte ".each()" ist nicht "sie brauchen jQuery", ich sprach nur über eine allgemeine Art, die Zielobjekte zu sammeln; Da es sich nicht um ein mobiles/Desktop-Problem handelt, sondern um ein Sammlungsproblem. Ich übersah die Tatsache, dass sie tatsächlich schon eine Sammlung eingerichtet hatten, weil sie nach einer ID fahndete - Entschuldigung –

sollten Sie eine Klasse verwenden keine ID, wenn Sie mehrere vids des gleichen Namens

if($.browser.mobile) 
    { 
     console.log("is mobile") 
     // it is mobile browser 
    } 
    else 
    { 
    console.log("is desktop") 
     // no mobile browser 
     var sources = document.querySelectorAll('video.patient-video source'); 
    // Define the video object this source is contained inside 
    var video = document.querySelector('video.patient-video'); 
    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(); 
    video.muted= "muted"; 
    }

Note der Punkt anstelle des Hash-Tag verwenden. Sie brauchen nicht einmal das "Video" davor. Vergessen Sie nicht, Ihre HTML entsprechend

es zu aktualisieren, sollten

<video class="patient-video" width="100%" preload="none" poster="../../assets/img/patient-home-1600.jpg" autoplay loop> 
      <source data-src="../../assets/video/patient-home-video-comp.mp4" src="" type="video/mp4"> 
      <source data-src="../../assets/video/patient-home-video-comp.webm" src="" type="video/webm"> 
      <source data-src="../../assets/video/patient-home-video-comp.ogv" src="" type="video/ogg"> 
      </video>

Quelle

2016-05-30 19:05:58

wenn Sie # Patientenvideo in Ihrem CSS haben, ändern Sie es, um zu lesen .Patient-Video {etc} –

Antwort

Verwandte Themen