web-dev-qa-db-fra.com

Puis-je utiliser javascript pour modifier dynamiquement la source d'une vidéo?

Comment changer la source d'une vidéo en utilisant JS?

<video id="myVideoTag" width="670" height="377" autoplay="true" controls="controls">
    <source src="http://www.test.com/test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
javascriptjqueryvideohtml5
31
March

Bien sûr, vous pouvez simplement définir l'attribut src sur l'élément source:

document.querySelector("#myVideoTag > source").src = "http://example.com/new_url.mp4"

Ou en utilisant jQuery au lieu des méthodes DOM standard:

$("#myVideoTag > source").attr("src", "http://example.com/new_url.mp4"​​​​)​
27
Brian Campbell

J'ai fait face à ce problème plusieurs fois et sur la base de mon expérience et de mes recherches, je peux suggérer ces options:

  • remplace complètement la balise video

oui, il suffit de ré-insérer l'élément <video> avec de nouvelles sources. C'est une approche simple mais efficace. N'oubliez pas de réinitialiser les écouteurs d'événements.

  • attribuer l'URL de la vidéo àvideo.src

cela, j’ai beaucoup vu dans les réponses ici, sur stackoverflow, et aussi dans les sources sur github.

var video = document.getElementById('#myVideo');
video.src = newSourceURL;

Cela fonctionne, mais vous ne pouvez pas choisir les options du navigateur.

  • call.load()on video element

selon documentation , vous pouvez mettre à jour les attributs src des balises <video> de <source>, puis appeler .load() pour que les modifications prennent effet:

<video id="myVideo">
    <source src="video.mp4" type="video/mp4" />
    <source src="video.ogg" type="video/ogg" />
</video>

<script>
    var video = document.getElementById('myVideo');
    var sources = video.getElementsByTagName('source');
    sources[0].src = anotherMp4URL;
    sources[1].src = anotherOggURL;
    video.load();
</script>

Néanmoins ici il est dit qu'il y a des problèmes dans certains navigateurs.

J'espère que ce sera utile d'avoir tout cela au même endroit.

14
evilguc

J'ai rencontré le même problème. Selon ce fil: 

changer de source sur le tag vidéo html5

il n'est pas possible de changer le src de la balise source. vous devrez utiliser src de la balise video elle-même. 

5
emik

j'espère que cela devrait fonctionner et veuillez ajuster le nom et l'identifiant de l'attribut selon vos besoins

code html ci-dessous 

<video controls style="max-width: 90%;" id="filePreview">                        
    <source type="video/mp4" id="video_source">
</video>

code js ci-dessous

   $("#fileToUpload").change(function(e){
        var source = $('#video_source');
        source[0].src = URL.createObjectURL(this.files[0]);
        source.parent()[0].load();
    });
0
Manoj Rana

Regarde ça. Ce javascript change le src de la balise source . https://jsfiddle.net/a94zcrtq/8/

<script>
  function toggle() {
            if ($(this).attr('data-click-state') == 1) {
                $(this).attr('data-click-state', 0)
                document.getElementById("source").src = "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4";
                document.getElementById("videoPlayer").load();
            } else {
                $(this).attr('data-click-state', 1)
                document.getElementById("source").src = "http://techslides.com/demos/sample-videos/small.mp4";
                document.getElementById("videoPlayer").load();
            }
        } 
</script>

0
user6701418

Bien que Campbell ait fourni la solution correcte, une solution plus complète à la question "spécifique à une liste de lecture" (comme indiqué dans les commentaires) est fournie ici . Cette solution peut être appliquée à tous les formats vidéo si elle est correctement implémentée (j'ai utilisé modernizr afin de détecter quelle source lira pour un navigateur donné, associée à la solution ci-dessus).

Cette solution fonctionnera (et a été testée) pour modifier les vidéos dans les balises vidéo HTML5 de TOUS les navigateurs HTML5, y compris IE8.

0
mkralla11

Cela fonctionne

<video id="videoplayer1" width="240" height="160" controls>
    <source id="video_res_1" src="" type="video/ogg">
</video>

et dans le javascript

document.getElementById("video_res_1").src = "my video url.ogv";
document.getElementById("videoplayer1").load();

La clé est la fonction .load () qui recharge le lecteur vidéo. 

0
jimver04