changement de source sur la balise vidéo html5

J'essaye de construire un lecteur vidéo, qui fonctionne partout. jusqu'à présent, j'irais avec:

<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 vu sur plusieurs sites, par exemple la vidéo pour tout le monde ) 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. ceux-ci devraient être ouverts immédiatement dans mon lecteur. donc je devrai "changer dynamiquement la source de la vidéo" (comme vu sur dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/ - section "Regardons un autre film ") avec javascript. oublions pour le moment la partie flashplayer (et donc IE), j'essaierai de m'en occuper plus tard.

donc mon JS pour changer les <source>balises 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. à savoir, firefox = O il y a une belle page, où vous pouvez observer le problème que j'ai: http://www.w3.org/2010/05/video/mediaevents.html

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

maintenant, j'ai découvert que lorsque je n'utilise pas plusieurs <source>balises, mais qu'un seul attribut src dans la <video>balise, tout fonctionne dans Firefox.

donc mon plan est d'utiliser simplement cet attribut src et de déterminer le fichier approprié en utilisant la fonction canPlayType () .

est-ce que je fais mal ou complique les choses?

J'ai détesté toutes ces réponses parce qu'elles étaient trop courtes ou reposaient sur d'autres cadres.

Voici "une" façon vanilla JS de faire cela, 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);

Modernizr a fonctionné comme un charme pour moi.

Ce que j'ai fait, c'est que je ne l'ai pas utilisé <source>. D'une manière ou d'une autre, cela a foiré les choses, car la vidéo ne fonctionnait que la première fois que load () était appelée. Au lieu de cela, 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 pris en charge 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 souhaitez pas utiliser Modernizr , vous pouvez toujours utiliser CanPlayType () .

Votre plan original me convient. Vous trouverez probablement plus de bizarreries de navigateur traitant de la gestion dynamique des <source>éléments, comme indiqué ici par la note de spécification W3:

La modification dynamique d'un élément source et de son attribut lorsque l'élément est déjà inséré dans un élément vidéo ou audio n'aura aucun effet. Pour changer ce qui est en cours de lecture, utilisez simplement l'attribut src directement sur l'élément média, en utilisant éventuellement la méthode canPlayType () pour choisir parmi les ressources disponibles. Généralement, manipuler manuellement les éléments sources après que le document a été analysé est une approche inutilement [sic] compliquée.

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

J'ai résolu cela avec cette méthode simple

function changeSource(url) {
   var video = document.getElementById('video');
   video.src = url;
   video.play();
}

Au lieu d'avoir le même lecteur vidéo pour charger de nouveaux fichiers, pourquoi ne pas effacer tout l' <video>élément et le recréer. La plupart des navigateurs le chargeront automatiquement si les src sont corrects.

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

Il suffit de mettre un div et de mettre à jour le contenu ...

<script>
function setvideo(src) {
    document.getElementById('div_video').innerHTML = '<video autoplay controls id="video_ctrl" style="height: 100px; width: 100px;"><source src="'+src+'" type="video/mp4"></video>';
    document.getElementById('video_ctrl').play();
}
</script>
<button onClick="setvideo('video1.mp4');">Video1</button>
<div id="div_video"> </div>

Selon les spécifications

La modification dynamique d'un élément source et de son attribut lorsque l'élément est déjà inséré dans un élément vidéo ou audio n'aura aucun effet. Pour changer ce qui est en cours de lecture, utilisez simplement l'attribut src directement sur l'élément média, en utilisant éventuellement la méthode canPlayType () pour choisir parmi les ressources disponibles. Généralement, la manipulation manuelle des éléments source après l'analyse du document est une approche inutilement compliquée.

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

Yaur: Bien que ce que vous avez copié et collé soit un bon conseil, cela ne signifie pas qu'il est impossible de changer l'élément source d'un élément vidéo HTML5 avec élégance, même dans IE9 (ou IE8 d'ailleurs). (Cette solution n'implique PAS remplacer tout l'élément vidéo, car il s'agit d'une mauvaise pratique de codage).

Une solution complète pour changer / changer de vidéo dans les balises vidéo HTML5 via javascript peut être trouvée ici et est testée dans tous les navigateurs HTML5 (Firefox, Chrome, Safari, IE9, etc.).

Si cela vous aide ou si vous rencontrez des problèmes, faites-le moi savoir.

Je viens avec cela pour changer la source vidéo de manière dynamique. L'événement "canplay" ne se déclenche parfois pas dans Firefox, j'ai donc ajouté "sharedmetadata". Aussi je mets en pause la vidéo précédente s'il y en a une ...

var loadVideo = function(movieUrl) {
    console.log('loadVideo()');
    $videoLoading.show();
    var isReady = function (event) {
            console.log('video.isReady(event)', event.type);
            video.removeEventListener('canplay', isReady);
            video.removeEventListener('loadedmetadata', isReady);
            $videoLoading.hide();
            video.currentTime = 0;
            video.play();
        },
        whenPaused = function() {
            console.log('video.whenPaused()');
            video.removeEventListener('pause', whenPaused);
            video.addEventListener('canplay', isReady, false);
            video.addEventListener('loadedmetadata', isReady, false); // Sometimes Firefox don't trigger "canplay" event...
            video.src = movieUrl; // Change actual source
        };

    if (video.src && !video.paused) {
        video.addEventListener('pause', whenPaused, false);
        video.pause();
    }
    else whenPaused();
};

Voici ma solution:

<video id="playVideo" width="680" height="400" controls="controls">
    <source id="sourceVideo" src="{{video.videoHigh}}" type="video/mp4">
</video>
    <br />
<button class="btn btn-warning" id="{{video.videoHigh}}" onclick="changeSource(this)">HD</button>
<button class="btn btn-warning" id="{{video.videoLow}}" onclick="changeSource(this)">Regular</button>

<script type="text/javascript">
    var getVideo = document.getElementById("playVideo");
    var getSource = document.getElementById("sourceVideo");
    function changeSource(vid) {
        var geturl = vid.id;
        getSource .setAttribute("src", geturl);
        getVideo .load()
        getVideo .play();
        getVideo .volume = 0.5;
    }
</script>

L'utilisation des <source />balises s'est avérée difficile pour moi dans Chrome 14.0.835.202 en particulier, même si cela a bien fonctionné pour moi dans FireFox. (Cela pourrait être mon manque de connaissances, mais je pensais qu'une solution alternative pourrait être utile de toute façon.) Donc, j'ai fini par utiliser simplement une <video />balise et définir l'attribut src directement sur la balise vidéo elle-même. La canPlayVideo('<mime type>')fonction a été utilisée pour déterminer si le navigateur spécifique pouvait ou non lire la vidéo d'entrée. Ce qui suit fonctionne dans FireFox et Chrome.

Incidemment, FireFox et Chrome utilisent le format "ogg", bien que Chrome recommande "webm". J'ai mis la vérification du support du navigateur de "ogg" en premier uniquement parce que d'autres messages ont mentionné que FireFox préfère la source ogg en premier (c'est-à-dire <source src="..." type="video/ogg"/>). Mais, je n'ai pas testé (et je doute fortement) que l'ordre dans le code fasse une différence lors de la définition du "src" sur la balise vidéo.

HTML

<body onload="setupVideo();">
    <video id="media" controls="true" preload="auto" src="">
    </video>
</body>

JavaScript

function setupVideo() {
       // You will probably get your video name differently
       var videoName = "http://video-js.zencoder.com/oceans-clip.mp4";

       // Get all of the uri's we support
       var indexOfExtension = videoName.lastIndexOf(".");
       //window.alert("found index of extension " + indexOfExtension);
       var extension = videoName.substr(indexOfExtension, videoName.length - indexOfExtension);
       //window.alert("extension is " + extension);
       var ogguri = encodeURI(videoName.replace(extension, ".ogv"));
       var webmuri = encodeURI(videoName.replace(extension, ".webm"));
       var mp4uri = encodeURI(videoName.replace(extension, ".mp4"));
       //window.alert(" URI is " + webmuri);


       // Get the video element
       var v = document.getElementById("media");
       window.alert(" media is " + v);

       // Test for support
       if (v.canPlayType("video/ogg")) {
            v.setAttribute("src", ogguri);
           //window.alert("can play ogg");
       }
       else if (v.canPlayType("video/webm")) {
           v.setAttribute("src", webmuri);
           //window.alert("can play webm");
       }
       else if (v.canPlayType("video/mp4")) {
           v.setAttribute("src", mp4uri);
           //window.alert("can play mp4");
       }
       else {
           window.alert("Can't play anything");
       }

      v.load();
      v.play();
  }

Je fais des recherches sur ce sujet depuis un bon moment et j'essaie de faire la même chose, alors j'espère que cela aidera quelqu'un d'autre. J'utilise crossbrowsertesting.com et je le teste littéralement dans presque tous les navigateurs connus de l'homme. La solution dont je dispose actuellement fonctionne sous Opera, Chrome, Firefox 3.5+, IE8 +, iPhone 3GS, iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPad 1+, Android 2.3+, Windows Phone 8.

Sources à changement dynamique

La modification dynamique de la vidéo est très difficile, et si vous voulez une solution de secours Flash, vous devrez supprimer la vidéo du DOM / page et la rajouter pour que Flash se mette à jour car Flash ne reconnaîtra pas les mises à jour dynamiques des variables Flash. Si vous allez utiliser JavaScript pour le modifier dynamiquement, je supprimerais complètement tous les <source>éléments et je l'utiliserais simplement canPlayTypepour définir le srcdans JavaScript et / breakou returnaprès le premier type de vidéo pris en charge et n'oubliez pas de mettre à jour dynamiquement le flash var mp4. De plus, certains navigateurs n'enregistrent pas que vous avez changé la source à moins que vous n'appeliez video.load(). Je pense que le problème que .load()vous rencontrez peut être résolu en appelant d'abordvideo.pause(). La suppression et l'ajout d'éléments vidéo peuvent ralentir le navigateur car il continue de mettre en mémoire tampon la vidéo supprimée, mais il existe une solution de contournement .

Prise en charge de plusieurs navigateurs

En ce qui concerne la partie réelle de plusieurs navigateurs, je suis également arrivé à Video For Everybody . J'ai déjà essayé le plugin MediaelementJS Wordpress, qui s'est avéré causer beaucoup plus de problèmes qu'il n'en a résolu. Je soupçonne que les problèmes étaient dus au plug-in Wordpress et non à la bibliothèque. J'essaie de trouver quelque chose qui fonctionne sans JavaScript, si possible. Jusqu'à présent, ce que j'ai trouvé est ce HTML simple:

<video width="300" height="150" controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" class="responsive">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone.mp4" type="video/mp4" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone3g.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="561" height="297">
    <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="wmode" value="transparent" />
    <param name="flashVars" value="config={'playlist':['http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg',{'url':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4','autoPlay':false}]}" />
    <img alt="No Video" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="561" height="297" title="No video playback capabilities, please download the video below" />
</object>
<strong>Download video:</strong>  <a href="video.mp4">MP4 format</a> | <a href="video.ogv">Ogg format</a> | <a href="video.webm">WebM format</a>
</video>

Remarques importantes :

• Fini par mettre l'ogg comme le premier <source>parce que Mac OS Firefox arrête d'essayer de lire la vidéo s'il rencontre un MP4 comme premier <source>.
• Les types MIME corrects sont importants .ogv fichiers doivent être video/ogg, non video/ogv
• Si vous avez une vidéo HD, le meilleur transcodeur que j'ai trouvé pour les fichiers OGG de qualité HD est Firefogg
• Le .iphone.mp4fichier est destiné à l'iPhone 4+, qui ne lira que les vidéos MPEG-4 avec vidéo H.264 Baseline 3 et audio AAC. Le meilleur transcodeur que j'ai trouvé pour ce format est Handbrake, l'utilisation du préréglage iPhone et iPod Touch fonctionnera sur iPhone 4+, mais pour que l'iPhone 3GS fonctionne, vous devez utiliser le préréglage iPod qui a une résolution beaucoup plus basse que j'ai ajoutée video.iphone3g.mp4.
• À l'avenir, nous pourrons utiliser un mediaattribut sur les <source>éléments pour cibler les appareils mobiles avec des requêtes multimédias, mais pour le moment, les anciens appareils Apple et Android ne le prennent pas suffisamment en charge.

Modifier :

• J'utilise toujours Video For Everybody mais je suis maintenant passé à l'utilisation de FlowPlayer, pour contrôler la solution de secours Flash, qui dispose d'une API JavaScript géniale qui peut être utilisée pour le contrôler.

J'ai une application Web similaire et je ne suis pas du tout confronté à ce genre de problème. Ce que je fais est quelque chose comme ceci:

var sources = new Array();

sources[0] = /path/to/file.mp4
sources[1] = /path/to/another/file.ogg
etc..

puis quand je veux changer les sources, j'ai une fonction qui fait quelque chose comme ceci:

this.loadTrack = function(track){
var mediaSource = document.getElementsByTagName('source')[0];
mediaSource.src = sources[track];

    var player = document.getElementsByTagName('video')[0];
    player.load();

}

Je fais cela pour que l'utilisateur puisse se frayer un chemin dans une liste de lecture, mais vous pouvez vérifier userAgent puis charger le fichier approprié de cette façon. J'ai essayé d'utiliser plusieurs balises source comme tout le monde le suggérait sur Internet, mais j'ai trouvé beaucoup plus propre et beaucoup plus fiable de manipuler l'attribut src d'une seule balise source. Le code ci-dessus a été écrit à partir de la mémoire, donc j'ai peut-être passé sous silence certains détails, mais l'idée générale est de changer dynamiquement l'attribut src de la balise source en utilisant javascript, le cas échéant.

Essayez de déplacer la source OGG vers le haut. J'ai remarqué que Firefox se confond parfois et arrête le joueur lorsque celui à qui il veut jouer, OGG, n'est pas le premier.

Ça vaut le coup d'essayer.

Une autre façon de le faire dans Jquery.

HTML

<video id="videoclip" controls="controls" poster="" title="Video title">
    <source id="mp4video" src="video/bigbunny.mp4" type="video/mp4"  />
</video>

<div class="list-item">
     <ul>
         <li class="item" data-video = "video/bigbunny.mp4"><a href="javascript:void(0)">Big Bunny.</a></li>
     </ul>
</div>

Jquery

$(".list-item").find(".item").on("click", function() {
        let videoData = $(this).data("video");
        let videoSource = $("#videoclip").find("#mp4video");
        videoSource.attr("src", videoData);
        let autoplayVideo = $("#videoclip").get(0);
        autoplayVideo.load();
        autoplayVideo.play();
    });

Utilisation de JavaScript et jQuery:

<script src="js/jquery.js"></script>
...
<video id="vid" width="1280" height="720" src="v/myvideo01.mp4" controls autoplay></video>
...
function chVid(vid) {
    $("#vid").attr("src",vid);
}
...
<div onclick="chVid('v/myvideo02.mp4')">See my video #2!</div>