CODEWITHSUNDEEP
jqueryvideohtml
Aximili
Aximili

Reputation: 29464

How do you change video src using jQuery?

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.

Upvotes: 102

Views: 146843

Answers (8)

vipero07
vipero07

Reputation: 1062

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

Upvotes: 26

RodrigoKulb
RodrigoKulb

Reputation: 49

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

Upvotes: 4

PJunior
PJunior

Reputation: 2767

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.

Upvotes: -2

Sheelpriy
Sheelpriy

Reputation: 1745

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

Upvotes: 1

Kokodoko
Kokodoko

Reputation: 28128

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

Upvotes: 2

smaj08r
smaj08r

Reputation: 229

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

Upvotes: 21

Hasanavi
Hasanavi

Reputation: 8625

The easiest way is using autoplay.

<video autoplay></video>

When you change src through javascript you don't need to mention load().

Upvotes: 0

Šime Vidas
Šime Vidas

Reputation: 185923

Try $("#divVideo video")[0].load(); after you changed the src attribute.

Upvotes: 174

Related Questions