web-dev-qa-db-fra.com

Comment changez-vous la vidéo src en utilisant jQuery?

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

J'ai ce code HTML:

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

Cela ne marche pas:

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

Cela change le code 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.

jqueryvideohtml5
56
Aximili

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

105
Šime Vidas

Je préférerais le faire comme ça

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

</video>

et ensuite utiliser 

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

J'ai essayé d'utiliser la balise autoplay, et .load () .play () doit encore être appelé au moins en chrome (peut-être ses paramètres).

la façon la plus simple de naviguer entre navigateurs pour le faire avec jquery en utilisant votre exemple serait

var $video = $('#divVideo video'),
videoSrc = $('source', $video).attr('src', videoFile);
$video[0].load();
$video[0].play();

Cependant, je vous conseillerais de le faire (pour des raisons de lisibilité et de simplicité):

var video = $('#divVideo video')[0];
video.src = videoFile;
video.load();
video.play();

Pour en savoir plus http://msdn.Microsoft.com/en-us/library/ie/hh924823(v=vs.85).aspx#ManagingPlaybackInJavascript

Informations supplémentaires: .load () ne fonctionne que si l'élément vidéo contient un élément source HTML (c'est-à-dire <source src="demo.mp4" type="video/mp4" />)

La manière non jquery serait:

HTML

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

JS

var video = document.getelementbyid('videoID');
video.src = videoFile;
video.load();
video.play();
8
vipero07
     $(document).ready(function () {     
    setTimeout(function () {
                    $(".imgthumbnew").click(function () {
                        $("#divVideo video").attr({
                            "src": $(this).data("item"),
                            "autoplay": "autoplay",        
                        })
                    })
                }, 2000); 
            }
        });

here ".imgthumbnew" is the class of images which are thumbs of videos, an extra attribute is given to them which have video url. u can change according to your convenient.
i would suggest you to give an ID to ur Video tag it would be easy to handle.
1
sheelpriy

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

0
RodrigoKulb

Ce qui a bien fonctionné pour moi, c’est d’émettre la commande 'play' après avoir changé le code source Étrangement, vous ne pouvez pas utiliser 'play ()' via une instance jQuery, vous devez donc utiliser 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();
0
Kokodoko

Le moyen le plus simple consiste à utiliser la lecture automatique.

<video autoplay></video>

Lorsque vous modifiez src via javascript, vous n'avez pas besoin de mentionner load ().

0
Hasanavi