How to Use JavaScript to Dynamically Change a Video's Source

Can I use javascript to dynamically change a video's source?

Sure,

1. You can set the src attribute on the source element:

   document.querySelector("#myVideoTag > source").src = "http://example.com/new_url.mp4"
   

   Or using jQuery instead of standard DOM methods:

   $("#myVideoTag > source").attr("src", "http://example.com/new_url.mp4"​​​​)​
   

2. Then you need to call the load method on the video element:

   videoElement.load()

Dynamically change the source element of a video

You're using quotes inside quotes on the following line of code:

var changingSource = '"videos/video' + counter + '.MP4"';

Try to change that to the following:

var changingSource = 'videos/video' + counter + '.MP4';

Of course you will need to have a counter variable which keeps track of the video you want to play, but I guess you have that sorted.

How do I dynamically change multiple video sources using JavaScript?

So i did some reading. First i tried deleting children of video, creating new source elements and appending to video, everything worked in page source, but view didn't render any changes.
So i followed .canPlayType route to determine if client supports .webm, and if not -- assigning mp4 src directly to video element.
Also added small fix so random generated numbers won't repeat. Random video loads when page is loaded and on click events afterwards. Here is the code, it's a mess:

<video autoplay loop poster="" id="bg">
</video>

<script type="text/javascript">
function randlink(a,b){
// generate random int in range of a,b. return str
var c = Math.floor(Math.random()*b)+a;
return "/static/media/"+c.toString();
}

//assign video new random src and poster on page load
window.onload = function(){
var bgvid = document.getElementById('bg');
var randbase = randlink(1,10);
bgvid.poster = randbase + ".jpg";
//check if webm, else mp4 src
if(bgvid.canPlayType('video/webm; codecs="vp8, vorbis"') != ""){
bgvid.src = randbase+".webm";
} else { bgvid.src = randbase+".mp4"}

//change src and poster on click
window.onclick = function() {
var randbase2 = randlink(1,10);
//check if unique
do{
randbase2 = randlink(1,10)
} while (randbase2 == randbase);
randbase = randbase2;
bgvid.poster = randbase2 + ".jpg";
var webmstr = ".webm";
//check if previous was webm, else mp4
if(bgvid.src.indexOf(webmstr) > 0){
bgvid.src = randbase2 +".webm";
}else{
bgvid.src = randbase2 +".mp4";
}}
};

How to play video dynamically when its source is changed

You don't need to add new source tag. Only set address of new video to src attribute of current source tag. Note that after changing src, you need to load video using .load() and then play video. Also if you have jQuery, use it to finding elements.

$("#howtovideo").on('change', function(){
    loadVideo();
});

function loadVideo(){
    var newsrc = 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4';
    $('#video > source').attr('src', newsrc);
    $("#video")[0].load();
    $("#video")[0].play();
}

---

Related Topics