changer la source de la balise vidéo html5

Question

J'essaie de créer un lecteur vidéo qui fonctionne partout. Pour l'instant, j'ai opté pour :

<video>
    <source src="video.mp4"></source>
    <source src="video.ogv"></source>
    <object data="flowplayer.swf" type="application/x-shockwave-flash">
        <param name="movie" value="flowplayer.swf" />
        <param name="flashvars" value='config={"clip":"video.mp4"}' />
    </object>
</video>

(comme on le voit sur plusieurs sites, par exemple vidéo pour tous ) jusqu'à présent, tout va bien.

Mais maintenant, je veux aussi une sorte de liste de lecture/menu avec le lecteur vidéo, à partir duquel je peux sélectionner d'autres vidéos. Celles-ci doivent s'ouvrir immédiatement dans mon lecteur. Je vais donc devoir "changer dynamiquement la source de la vidéo" (comme vu sur dev.opera.com/articles/tout ce dont vous avez besoin pour savoir-html5-video-audio/ - section "Regardons un autre film") avec Javascript. Oublions la partie Flash player (et donc IE) pour l'instant, j'essaierai de m'en occuper plus tard.

Donc mon JS pour changer le <source> devrait être quelque chose comme :

<script>
function loadAnotherVideo() {
    var video = document.getElementsByTagName('video')[0];
    var sources = video.getElementsByTagName('source');
    sources[0].src = 'video2.mp4';
    sources[1].src = 'video2.ogv';
    video.load();
}
</script>

Le problème est que cela ne fonctionne pas dans tous les navigateurs. En particulier, dans Firefox, il y a une belle page où vous pouvez observer le problème que je rencontre : http://www.w3.org/2010/05/video/mediaevents.html

Dès que je déclenche la load() (dans Firefox, attention), le lecteur vidéo meurt.

Maintenant j'ai découvert que lorsque je n'utilise pas de multiples <source> mais une seule src au sein de l'élément <video> tag, le tout fait fonctionnent dans Firefox.

Donc mon plan est de juste utiliser ça src et déterminer le fichier approprié en utilisant l'attribut canPlayType() fonction.

Est-ce que je m'y prends mal ou est-ce que je complique les choses ?

Answer 1

J'ai détesté toutes ces réponses car elles étaient trop courtes ou s'appuyaient sur d'autres cadres.

Voici "une" façon vanille JS de le faire, fonctionnant dans Chrome, veuillez tester dans d'autres navigateurs :

http://jsfiddle.net/mattdlockyer/5eCEu/2/

HTML :

<video id="video" width="320" height="240"></video>

JS :

var video = document.getElementById('video');
var source = document.createElement('source');

source.setAttribute('src', 'http://www.tools4movies.com/trailers/1012/Kill%20Bill%20Vol.3.mp4');

video.appendChild(source);
video.play();

setTimeout(function() {  
    video.pause();

    source.setAttribute('src', 'http://www.tools4movies.com/trailers/1012/Despicable%20Me%202.mp4'); 

    video.load();
    video.play();
}, 3000);

Answer 2

Modernizr a fonctionné comme un charme pour moi.

Ce que j'ai fait, c'est que je n'ai pas utilisé <source> . D'une manière ou d'une autre, cela a fait foirer les choses, puisque la vidéo n'a fonctionné que la première fois que load() a été appelé. À la place, j'ai utilisé l'attribut source à l'intérieur de la balise vidéo -> <video src="blabla.webm" /> et utilisé Modernizr pour déterminer le format supporté par le navigateur.

<script>
var v = new Array();

v[0] = [
        "videos/video1.webmvp8.webm",
        "videos/video1.theora.ogv",
        "videos/video1.mp4video.mp4"
        ];
v[1] = [
        "videos/video2.webmvp8.webm",
        "videos/video2.theora.ogv",
        "videos/video2.mp4video.mp4"
        ];
v[2] = [
        "videos/video3.webmvp8.webm",
        "videos/video3.theora.ogv",
        "videos/video3.mp4video.mp4"
        ];

function changeVid(n){
    var video = document.getElementById('video');

    if(Modernizr.video && Modernizr.video.webm) {
        video.setAttribute("src", v[n][0]);
    } else if(Modernizr.video && Modernizr.video.ogg) {
        video.setAttribute("src", v[n][1]);
    } else if(Modernizr.video && Modernizr.video.h264) {
        video.setAttribute("src", v[n][2]);
    }

    video.load();
}
</script>

J'espère que cela vous aidera :)

Si vous ne voulez pas utiliser Modernizr vous pouvez toujours utiliser CanPlayType() .

Answer 3

Votre plan initial me semble parfait. Vous trouverez probablement d'autres bizarreries de navigateur traitant de la gestion dynamique de l'élément <source> comme indiqué ici par la note de spécification W3 :

Modifier dynamiquement un élément source et son attribut lorsque l'élément est déjà inséré dans un élément vidéo ou audio n'aura aucun effet. Pour modifier ce qui est lu, il suffit d'utiliser directement l'attribut src de l'élément multimédia, en faisant éventuellement appel à la méthode canPlayType() pour choisir parmi les ressources disponibles. En général, la manipulation manuelle des éléments sources après l'analyse du document est une approche inutilement [sic] compliquée.

http://dev.w3.org/html5/spec/Overview.html#the-source-element

Answer 4

Au lieu de faire en sorte que le même lecteur vidéo charge de nouveaux fichiers, pourquoi ne pas effacer l'ensemble de la <video> et le recréer. La plupart des navigateurs le chargeront automatiquement si les src sont correctes.

Exemple (avec Prototype ) :

var vid = new Element('video', { 'autoplay': 'autoplay', 'controls': 'controls' });
var src = new Element('source', { 'src': 'video.ogg', 'type': 'video/ogg' });

vid.update(src);
src.insert({ before: new Element('source', { 'src': 'video.mp4', 'type': 'video/mp4' }) });

$('container_div').update(vid);

Answer 5

Selon la spécification

Modification dynamique d'un élément source et de son attribut lorsque l'élément élément est déjà inséré dans un élément vidéo ou audio n'aura aucun effet. Pour modifier ce qui est lu, il suffit d'utiliser directement l'attribut src de l'élément media l'élément multimédia, en utilisant éventuellement la méthode canPlayType() pour choisir parmi les ressources disponibles. En général, la manipulation manuelle des éléments sources après que le document a été document a été analysé est une approche inutilement compliquée.

Donc ce que vous essayez de faire n'est apparemment pas censé fonctionner.