CODEWITHSUNDEEP
javascriptjqueryhtmlvideo
NORD LYCHT
NORD LYCHT

Reputation: 13

Also changing the alternative HTML5 video file/format source via jQuery?

I'm still not really 'good' with Javascript and jQuery but I'm learning. The following, however, puzzles me:

I have a standard HTML5 video tag:

  <video id="videoclip">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
  </video>

Now I need to change to video src via jQuery. If I only have ONE source i.e. 

    <source id="mp4" src="video.mp4" type="video/mp4">

I just do THIS:

function changeVideo() {

        var newVideo = "new_video.mp4";

        $("#videoclip").attr("src",newVideo) }

(I abbreviated this snippet. I actually have quite a few variables and things that happen set up there).

So this works well. But what do I need to do if I have TWO sources as in the very first code segment? An alternative webm file?

I tried giving the two source tags different IDs like so:

   <source id="mp4" src="video.mp4" type="video/mp4">
   <source id="webm" src="video.webm" type="video/webm">

and then did this:

function changeVideo() {

        var newVideo = "new_video.mp4";
        var newVideo2 = "new_video.webm";

        $("#mp4").attr("src",newVideo);
        $("#webm").attr("src",newVideo2)

Doesn't work. I mean it DOES the first time I play the video but when I use another similar function to change the sources yet again it won't work. It will be the same source set in the first place. It won't budge. :(

Everything I wrote over the last hours works perfectly now with this exception.

How do I get past this exception?

Upvotes: 1

Views: 235

Answers (1)

anonimo
anonimo

Reputation: 11

You need to add this in the changeVideo function:

$("#videoclip")[0].load();

$("#videoclip")[0].play();

Upvotes: 1

Related Questions