CODEWITHSUNDEEP
javascriptjqueryhtmlvideo
Hopeless
Hopeless

Reputation: 109

Jquery Changing Video source Src not having the desired affect

I'm trying to dynamically change the src file of a video element on my page, however when I change the source it does not seem to effect the video at all.

I can even delete the video source element in the browser and the video still keeps chugging along as if nothing has happened to it.

Am I misunderstanding the video element?

Thanks

Demo: https://jsfiddle.net/wh1pwzm6/3/

Html

<video id="video-10" width="300px" videoid="2" class="text-left  video-content  fadeIn wow animated" autoplay="" loop="" muted="" animationid="8" style="animation-duration: 5s; visibility: visible; animation-name: fadeIn;">
    <source id="src-video-10" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>

JQuery

var newfile = "http://www.w3schools.com/html/mov_bbb.mp4";

$("#src-video-10").attr('src',newfile);

Edit, thanks to guest271314 for the answer, edited the answer below

var newfile = "http://www.w3schools.com/html/mov_bbb.mp4";


var video = $("#video-10")[0];
video.pause();
$("#src-video-10").attr('src',newfile);
video.load();
video.play();

Upvotes: 2

Views: 6464

Answers (1)

guest271314
guest271314

Reputation: 1

Note, you are selecting video src, though using source element ?

Try calling .load() then .play() on video element after setting source src

var video = $("#video-10");
video.find("source").attr("src", newfile);
video.get().load();
video.get().play();

Upvotes: 4

Related Questions