it-swarm.com.de

Wie kann ich mit sQuery Video-SRC ändern?

Wie ändern Sie die src eines HTML5-Videotags mit jQuery?

Ich habe dieses 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 die Quelle, wenn ich es mit Firebug überprüfe, aber es ändert nicht wirklich das abgespielte Video.

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

56
Aximili

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

105
Šime Vidas

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>' );
15
smaj08r

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

die einfachste Cross-Browser-Methode, 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

Zusatzinfo: .load () funktioniert nur, wenn sich in dem Video-Element ein HTML-Quellelement befindet (d. H. <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();
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

Was für mich funktionierte, war, den Befehl 'play' auszugeben, nachdem die Quelle geändert wurde. __ Seltsamerweise können Sie 'play ()' nicht über eine jQuery-Instanz verwenden. Verwenden Sie also 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();
0
Kokodoko

Der einfachste Weg ist die automatische Wiedergabe.

<video autoplay></video>

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

0
Hasanavi