Comment changer le src vidéo à l'aide de jQuery ?

Question

Comment modifier le src d'une balise vidéo HTML5 à l'aide de jQuery ?

J'ai ce HTML :

 <div id="divVideo">
  <video controls>
    <source src="test1.mp4" type="video/mp4" />
  </video>
</div>

Cela ne fonctionne pas :

 var videoFile = 'test2.mp4';
$('#divVideo video source').attr('src', videoFile);

Cela change le src si je l'inspecte à l'aide de firebug, mais ne change pas réellement la vidéo en cours de lecture.

J'ai lu sur .pause() et .load(), mais je ne sais pas comment les utiliser.

Answer 1

Essayez $("#divVideo video")[0].load(); après avoir modifié l'attribut src.

Answer 2

je préfère faire comme ça

 <video  id="v1" width="320" height="240" controls="controls">

</video>

puis utiliser

 $("#v1").html('<source src="test1.mp4" type="video/mp4"></source>' );

Answer 3

JQUERY

 <script type="text/javascript">
$(document).ready(function() {
  var videoID = 'videoclip';
  var sourceID = 'mp4video';
  var newmp4 = 'media/video2.mp4';
  var newposter = 'media/video-poster2.jpg';
 
  $('#videolink1').click(function(event) {
    $('#'+videoID).get(0).pause();
    $('#'+sourceID).attr('src', newmp4);
    $('#'+videoID).get(0).load();
     //$('#'+videoID).attr('poster', newposter); //Change video poster
    $('#'+videoID).get(0).play();
  });
});

Answer 4

Ce qui a fonctionné pour moi, c'est d'émettre la commande "play" après avoir changé la source. Étrangement, vous ne pouvez pas utiliser 'play()' via une instance jQuery, vous utilisez donc simplement getElementByID comme suit :

HTML

 <video id="videoplayer" width="480" height="360"></video>

JAVASCRIPT

 $("#videoplayer").html('<source src="'+strSRC+'" type="'+strTYPE+'"></source>' );
document.getElementById("videoplayer").play();