Jak zmienić src tagu wideo HTML5 za pomocą jQuery?
Mam ten HTML:
<div id="divVideo">
<video controls>
<source src="test1.mp4" type="video/mp4" />
</video>
</div>
To nie działa:
var videoFile = 'test2.mp4';
$('#divVideo video source').attr('src', videoFile);
Zmienia src, jeśli sprawdzę go za pomocą firebuga, ale tak naprawdę nie zmienia odtwarzanego wideo.
Czytałem o .pause () i .load (), ale nie jestem pewien, jak ich używać.
[0]
. Okazuje się jednak, że trzeba go dodać,[0]
mimo że mój selektor wybierał dokładnie jeden tag wideo.Wolałbym zrobić to w ten sposób
<video id="v1" width="320" height="240" controls="controls"> </video>
a następnie użyj
$("#v1").html('<source src="test1.mp4" type="video/mp4"></source>' );
źródło
Próbowałem użyć tagu autoodtwarzania, a .load () .play () nadal musi być wywoływany przynajmniej w chrome (może to moje ustawienia).
Najprostszym sposobem na zrobienie tego w jquery w przeglądarce na Twoim przykładzie byłoby
var $video = $('#divVideo video'), videoSrc = $('source', $video).attr('src', videoFile); $video[0].load(); $video[0].play();
Jednak sposób, w jaki proponuję to zrobić (ze względu na czytelność i prostotę), jest
var video = $('#divVideo video')[0]; video.src = videoFile; video.load(); video.play();
Dalsza lektura http://msdn.microsoft.com/en-us/library/ie/hh924823(v=vs.85).aspx#ManagingPlaybackInJavascript
Dodatkowe informacje: .load () działa tylko wtedy, gdy w elemencie video znajduje się źródłowy element HTML (tj.
<source src="demo.mp4" type="video/mp4" />
)Sposób inny niż jQuery byłby następujący:
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();
źródło
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(); }); });
źródło
U mnie zadziałało wydanie polecenia „play” po zmianie źródła. O dziwo nie możesz użyć funkcji 'play ()' przez instancję jQuery, więc po prostu używasz getElementByID w następujący sposób:
HTML
<video id="videoplayer" width="480" height="360"></video>
JAVASCRIPT
$("#videoplayer").html('<source src="'+strSRC+'" type="'+strTYPE+'"></source>' ); document.getElementById("videoplayer").play();
źródło
$(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.
źródło
Najłatwiej jest użyć autoodtwarzania.
<video autoplay></video>
Kiedy zmieniasz src za pomocą javascript, nie musisz wspominać o load ().
źródło
To działa na Flowplayer 6.0.2 .
<script> flowplayer().load({ sources: [ { type: "video/mp4", src: variable } ] }); </script>
gdzie zmienna jest wartością zmiennej javascript / jquery, tag wideo powinien być taki
<div class="flowplayer"> <video> <source type="video/mp4" src="" class="videomp4"> </video> </div>
Mam nadzieję, że to pomoże każdemu.
źródło