How do I change an html video source using javascript?

Question

I have tried a couple of things and didn't succeed. stackoverflow couldn't help me either. I have the following video:

<video class="video-js vjs-default-skin" width="1024" height="720" controls data-setup='{}' id="vidarea">
<source src="E:/Vids/test.mp4" type="video/mp4" id="vidsource"></video>

I wan't to change the video displayed when I click another video icon on my page using JS. I just couldn't do it. I've tried

const myVideo = document.getElementById('vidsource');
.
.
.
myVideo.src = 'E:/Vids/test2.mp4';

this can help you [changing source on html5 video tag](https://stackoverflow.com/questions/5235145/changing-source-on-html5-video-tag) — Salih Can, Dec 01 '18 at 20:14
https://stackoverflow.com/questions/32168173/success-change-source-track-of-video-use-onclick-button-but-the-video-still-s/32176019#32176019 — Kaiido, Dec 01 '18 at 23:12

score 0 · Answer 1 · answered Dec 01 '18 at 20:11

0

you can use setAttribute() to src attribute https://www.w3schools.com/jsref/met_element_setattribute.asp

answered Dec 01 '18 at 20:11

abdullah elkasass

142
5

Unfortunately this does not work. I've tried it before. – Pr1 Dec 01 '18 at 20:14

Moumen Soliman · Answer 2 · 2018-12-01T20:46:43.033

Update without setAttribute, (this works with me & please check the video url), you don't need <source> tag here:

<video id="vidarea" class="video-js vjs-default-skin" width="1024" height="720" controls autoplay ></video>

<script> 
   var vid = document.getElementById("vidarea");
   vid.src = "E:/Vids/test2.mp4";
</script>

using setAttribute, here's your code:

document.getElementById('vidsource').setAttribute("src", "E:/Vids/test2.mp4");

if you need to add it on load

window.onload = function() {
  document.getElementById('vidsource').setAttribute("src", "E:/Vids/test2.mp4"); 
};

if you need to add it on click

<video class="video-js vjs-default-skin" width="1024" height="720" controls 
 data-setup='{}' id="vidarea">
 <source type="video/mp4" id="vidsource"></video>    
 <button onclick="myFunction()">Add src</button>


function myFunction() {
    document.getElementById('vidsource').setAttribute("src", "E:/Vids/test2.mp4"); 
}

I've update the answer, please check & make sure the video url is right because it works with me on w3schools testing area — Moumen Soliman, Dec 01 '18 at 20:47

How do I change an html video source using javascript?

2 Answers2