Caricamento di video HTML con jQuery

Quindi quello che sto cercando di caricare è diverso video in base alle dimensioni dello schermo del dispositivo.

Ecco la mia jQuery:

var v = new Array(); v[0] = [ "header.webm", "header.ogv", "header.mp4" ]; v[1] = [ "mobHead.webm", "mobHead.ogv", "mobHead.mp4" ]; var src = $('#bgvid source'); if(window.innerWidth >= 642){ src.attr("src", v[0]); } if(window.innerWidth <= 641){ src.attr("src", v[1]); } 

Ecco il mio HTML:

  

Ecco l’output del browser:

  

Puoi vedere dove si trova il problema. Mi serve per caricarli nell’ordine di cascata corretto e non caricarli tutti nella stessa sezione.

Come posso fare questo?

Dal momento che hai già jQuery nel tuo progetto, usalo:

HTML:

  

JS:

 var v = []; v[0] = ["header.webm", "header.ogv", "header.mp4"]; v[1] = ["mobHead.webm", "mobHead.ogv", "mobHead.mp4"]; var index = window.innerWidth < = 641 ? 1 : 0; $('#webmvid').attr('src', v[index][0]); $('#oggvid').attr('src', v[index][1]); $('#mp4vid').attr('src', v[index][2]); 

Fondamentalmente ho reso il tuo if-case più corto e mirato a ogni video src con un ID e jQuery.

Prova questo (aggiungi id a ogni e fai riferimento a loro in js):

HTML:

  

JS:

 v1 = { webm: "header.webm", ogv: "header.ogv", mp4: "header.mp4" } v2 = { webm: "mobHead.webm", ogv: "mobHead.ogv", mp4: "mobHead.mp4" }; if(window.innerWidth >= 642){ $('#src1').attr("src", v1.webm); $('#src2').attr("src", v1.ogv); $('#src3').attr("src", v1.mp4); } else { $('#src1').attr("src", v2.webm); $('#src2').attr("src", v2.ogv); $('#src3').attr("src", v2.mp4); }