Wie ändere ich Video src mit jQuery?

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.

Versuchen Sie es, $("#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="test1.mp4" type="video/mp4"></source>' );

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

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

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

Am einfachsten ist die automatische Wiedergabe.

<video autoplay></video>

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

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.