Wie ändere ich Video src mit jQuery?

83

Wie ändere ich den Quellcode eines HTML5-Video-Tags mit jQuery?

Ich habe diesen HTML:

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

Das funktioniert nicht:

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

Es ändert den src, wenn ich ihn mit Firebug inspiziere, ändert aber nicht das abgespielte Video.

Ich habe über .pause () und .load () gelesen, bin mir aber nicht sicher, wie ich sie verwenden soll.

Aximili
quelle

Antworten:

147

Versuchen Sie es, $("#divVideo video")[0].load();nachdem Sie das src-Attribut geändert haben.

Šime Vidas
quelle
Danke, ich habe es ohne versucht [0]. Es stellt sich jedoch heraus, dass das Hinzufügen erforderlich ist, [0]obwohl mein Selektor genau ein Video-Tag ausgewählt hat.
Vaibhav Vishal
1
@VaibhavVishal Wahrscheinlich, weil Jquery eine eigene Ladefunktion hat (vor Version 3 zwei davon).
DylanYoung
Arbeitete für mich, wo ich src von AJAX ändere.
PriyankMotivaras
19

Ich würde es lieber so machen

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

</video>

und dann verwenden

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

Ich habe versucht, das Autoplay-Tag zu verwenden, und .load () .play () muss immer noch mindestens in Chrome aufgerufen werden (möglicherweise sind es meine Einstellungen).

Der einfachste browserübergreifende Weg, dies mit jquery anhand Ihres Beispiels zu tun, wäre

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

Ich würde jedoch vorschlagen, dass Sie dies tun (aus Gründen der Lesbarkeit und Einfachheit)

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

Weiterführende Literatur http://msdn.microsoft.com/en-us/library/ie/hh924823(v=vs.85).aspx#ManagingPlaybackInJavascript

Zusätzliche Informationen: .load () funktioniert nur, wenn sich im Videoelement ein HTML-Quellelement befindet (dh <source src="demo.mp4" type="video/mp4" />)

Der nicht jquery Weg wäre:

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();
vipero07
quelle
Ich erhalte einen Javascript-Fehler, der besagt, dass das Laden nicht unterstützt wird. IE 11.
Newclique
1
Ich habe einige zusätzliche Informationen zu Ihrem Fehler Wade hinzugefügt.
Vipero07
2

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

RodrigoKulb
quelle
1

Was für mich funktioniert hat, war die Ausgabe des Befehls 'Wiedergabe' nach dem Ändern der Quelle. Seltsamerweise können Sie 'play ()' nicht über eine jQuery-Instanz verwenden, also verwenden Sie getElementByID einfach wie folgt:

HTML

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

JAVASCRIPT

$("#videoplayer").html('<source src="'+strSRC+'" type="'+strTYPE+'"></source>' );
document.getElementById("videoplayer").play();
Kokodoko
quelle
1
     $(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.
Sheelpriy
quelle
0

Am einfachsten ist die automatische Wiedergabe.

<video autoplay></video>

Wenn Sie src über Javascript ändern, müssen Sie load () nicht erwähnen.

Hasanavi
quelle
Dies hat Nebenwirkungen. Sie sollten sie erwähnen.
DylanYoung
-2

Dies funktioniert in Flowplayer 6.0.2 .

<script>
    flowplayer().load({
         sources: [
            { type: "video/mp4",  src: variable }
            ]
        });
</script>

wo Variable ein Javascript / jquery Variablenwert ist, sollte der Video - Tag etwas dies sein

<div class="flowplayer">
   <video>
      <source type="video/mp4" src="" class="videomp4">
   </video>
</div>

Hoffe es hilft jedem.

PJunior
quelle