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

Viewed 82488

How can I change a video's source using JS?

<video id="myVideoTag" width="670" height="377" autoplay="true" controls="controls">
    <source src="http://www.test.com/test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
10 Answers

You shouldn't try to change the src attribute of a source element, according to this spec note.

Dynamically modifying a source element and its attribute when the element is already inserted in a video or audio element will have no effect. To change what is playing, just use the src attribute on the media element directly

So lets say you have:

<audio>
    <source src='./first-src'/>
</audio>

You can modify the media src like so:

<audio src='./second-src'/>
    <source src='./first-src'/>
</audio>

i hope it should work and please adjust attribute name and id as per your need

html code below

<video controls style="max-width: 90%;" id="filePreview">                        
    <source type="video/mp4" id="video_source">
</video>

js code below

   $("#fileToUpload").change(function(e){
        var source = $('#video_source');
        source[0].src = URL.createObjectURL(this.files[0]);
        source.parent()[0].load();
    }); 

I found that dynamically creating and appending the child source elements did the trick.

var videoElement = document.querySelector('.my-video');
var videoSources = ["video.mp4","video.webm"]
if (videoElement) {
    for (var i = 0; i < videoSources.length; i++) {
        var sourceTag = document.createElement("source");
        sourceTag.type = "video/" + videoSources[i].split('.')[1];
        sourceTag.src = videoSources[i];
        videoElement.appendChild(sourceTag);
    }           
}

Since the other solutions didn't work for me, here's what I did:

 <video width="400" controls id="the_id_of_your_video_here">
  <source src="path_to_first_video.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

<button type="button" name="button" onclick="changeVid()">Click me to change the video</button>

<script>
function changeVid(){
  var video =  document.getElementById("the_id_of_your_video_here");
  video.src = 'path_to_second_video.mp4'; // Make sure to not use ..\ like in HTML but ../ if you have to give a more complex file path like: '../../myVideoFolder/myVideo.mp4'
  video.load();
}
</script>

Nothing else is needed to get this solution running - unless I messed up somehow...

Related