How do you change the src of a HTML5 video tag using jQuery?
I got this HTML:
<div id="divVideo">
<video controls>
<source src="test1.mp4" type="video/mp4" />
</video>
</div>
This doesn't work:
var videoFile = 'test2.mp4';
$('#divVideo video source').attr('src', videoFile);
It changes the src if I inspect it using firebug, but does not actually change the video being played.
I read about .pause() and .load(), but I'm not sure how to use them.
Try $("#divVideo video")[0].load(); after you changed the src attribute.
[0]. But turns out its required to add [0] even though my selector was selecting exactly one video tag.
I've tried using the autoplay tag, and .load() .play() still need to be called at least in chrome (maybe its my settings).
the simplest cross browser way to do this with jquery using your example would be
var $video = $('#divVideo video'),
videoSrc = $('source', $video).attr('src', videoFile);
$video[0].load();
$video[0].play();
However the way I'd suggest you do it (for legibility and simplicity) is
var video = $('#divVideo video')[0];
video.src = videoFile;
video.load();
video.play();
Further Reading http://msdn.microsoft.com/en-us/library/ie/hh924823(v=vs.85).aspx#ManagingPlaybackInJavascript
Additional info: .load() only works if there is an html source element inside the video element (i.e. <source src="demo.mp4" type="video/mp4" />)
The non jquery way would be:
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();
I would rather make it like this
<video id="v1" width="320" height="240" controls="controls">
</video>
and then use
$("#v1").html('<source src="test1.mp4" type="video/mp4"></source>' );
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();
});
});What worked for me was issuing the 'play' command after changing the source. Strangely you cannot use 'play()' through a jQuery instance so you just use getElementByID as follows:
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.
The easiest way is using autoplay.
<video autoplay></video>
When you change src through javascript you don't need to mention load().
This is working on Flowplayer 6.0.2.
<script>
flowplayer().load({
sources: [
{ type: "video/mp4", src: variable }
]
});
</script>
where variable is a javascript/jquery variable value, The video tag should be something this
<div class="flowplayer">
<video>
<source type="video/mp4" src="" class="videomp4">
</video>
</div>
Hope it helps anyone.
