2012-08-28 8 views
11

Ho letto letteralmente ogni thread di stackoverflow relativo alla modifica dinamica della sorgente di tag video tramite javascript in IE9, inclusi i post utili ma non concordati here e here, ma non sentirsi come se ci fosse un'altra soluzione. Ecco l'esempio molto semplice di quello che sto cercando di fare:setAttribute e video.src per la modifica della sorgente di tag video non funzionante in IE9

var video = document.getElementById('video'); 
    //now, use either of the lines of code below to change source dynamically 

    video.src = "nameOfVideo"; 
    //or use... 
    video.setAttribute("src", "nameOfVideo"); 

Entrambe queste righe di codice sono odiati a fondo da Internet Explorer, in particolare perché lo src è sicuramente in fase di changeed dopo essere stato controllato con un semplice video.getAttribute, anche se IE non sta facendo nulla per cambiare il video.

Sì, ci sono affermazioni che con IE, DEVI avere gli src elencati con l'HTML per cambiarli dopo che la pagina è stata caricata, MA ho sicuramente trovato una discussione su StackOverflow che ha proposto una soluzione tramite JavaScript semplice. (Con mia delusione, non riesco più a trovare il filo che lo ha fatto ... e ho cercato ovunque, credetemi).

Con tutto ciò che detto, se qualcuno può fornire una soluzione SENZA l'uso di posizionare tutti i video src all'interno dell'HTML e invece, impostando/creando dinamicamente gli src usando JavaScript come mostrato sopra, sarei estremamente grato.

(Oppure, se potessi indicarmi la direzione del thread di overflow "mancante" che verifica se l'attributo esiste in IE e quindi in qualche modo impostare lo src tramite javascript, ciò sarà anche apprezzato).

risposta

26

Ottime notizie, ho trovato una vera soluzione per cambiare/cambiare video nei tag video HTML5 tramite JavaScript senza utilizzare il fastidioso hack che ho provato a spiegare! È incredibilmente semplice e ci sono voluti un sacco di sperimentazioni con IE. Di seguito è riportato il codice nella sua forma più semplice di lavorare in IE:

<html> 
    <body> 
    <video id='videoPlayer' width="320" height="240" controls="controls"> 
     <source id='mp4Source' src="movie.mp4" type="video/mp4" /> 
     <source id='oggSource' src="movie.ogg" type="video/ogg" /> 
    </video> 

<!-- You MUST give your sources tags individual ID's for the solution to work. --> 

    <script> 
     var player = document.getElementById('videoPlayer'); 

     var mp4Vid = document.getElementById('mp4Source'); 

     player.pause(); 

     // Now simply set the 'src' property of the mp4Vid variable!!!! 

     mp4Vid.src = "/pathTo/newVideo.mp4"; 

     player.load(); 
     player.play(); 
    </script> 
    </body> 
</html> 

E il gioco è fatto. Incredibilmente semplice: testato e funzionante in IE8 e IE9 ... Se si riscontrano problemi, faccelo sapere.

+1

Sono su un altro andare in giro con vid html5. La compatibilità del browser è dura qui. Il tempo si stava accumulando per far sì che IE9 facesse quello che potevano fare ff e chrome. Il tuo post lo ha inchiodato. Perfetto, grazie. A proposito, bel sito :) –

+0

l'ho rotto. Ha preso un paio di minuti ansiosi ma ha trovato il .. ORDINE O GLI ELEMENTI ! .. è critico. .mp4 deve essere prima del tipo .ogg. Ero passato in modo che ff non dicesse "tipo non supportato" nella console. Ma ff funziona in entrambi i modi, ma gli altri no! –

+8

IE8? Come è possibile? Ie8 non supporta il tag video. – franzlorenzon

Problemi correlati