Wie ändert man die Videoquelle mit jQuery?

Wie ändert man den src eines HTML5-Video-Tags mit jQuery?

Ich habe diesen HTML-Code:

<div id="divVideo">
  <video controls>
    <source src="https://stackoverflow.com/questions/3983036/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 es 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.

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

Ich würde es lieber so machen

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

</video>

und dann verwenden

$("#v1").html('<source src="https://stackoverflow.com/questions/3983036/test1.mp4" type="video/mp4"></source>' );

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

Der einfachste Cross-Browser-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();

Allerdings würde ich vorschlagen, dass Sie es tun (aus Gründen der Lesbarkeit und Einfachheit).

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

Weiterführende Lektüre
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 (z <source src="https://stackoverflow.com/questions/3983036/demo.mp4" type="video/mp4" />)

Der Nicht-Jquery-Weg wäre:

HTML

<div id="divVideo">
  <video id="videoID" controls>
    <source src="https://stackoverflow.com/questions/3983036/test1.mp4" type="video/mp4" />
  </video>
</div>

JS

var video = document.getElementById('videoID');
video.src = videoFile;
video.load();
video.play();

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

Was für mich funktionierte, war die Ausgabe des Befehls „Play“, nachdem die Quelle geändert wurde. Seltsamerweise können Sie ‘play()’ nicht über eine jQuery-Instanz verwenden, also verwenden Sie einfach getElementByID wie folgt:

HTML

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

JAVASCRIPT

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

     $(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.

Der einfachste Weg ist die Verwendung von Autoplay.

<video autoplay></video>

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