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