Changing Source on Html5 Video Tag

How to change video source with just JavaScript

You do not need to append new source. Just set new src attribute and call video.load function.

See working JSFiddle

video = document.getElementById('video');
source = document.getElementById('source');

function PlayVideo(srcVideo){
  video.pause();
  source.src = srcVideo;
  video.load();
  video.play();
}

function StopVideo(){
  document.getElementById('video').pause();
}

EDIT:
Changed .setAttribute('src',srcVideo) to .src = srcVideo because this is commonly used method to change source.

How to change source in html5 video with jQuery

It's simple, just do this:

btn.on("click", function(){
  var src = "new_video_src.mp4";
  $("#video").find("#tv_main_channel").attr("src", src)
})

Unable to change source of video tag via JavaScript on IE9

Remove the complete video html element and create a new one instead of just replacing one of its attributes.

How to change the video source link according to time in HTML video player?

<video width="320" height="240" controls id="player">
  Your browser does not support the video tag.
</video>

var d = new Date(); // get date 
var h = d.getHours(); // get hour in 24

var player = document.getElementById('player');

switch (h) {
  case 12:
    player.src = 'movie.mp4';
    break;
  case 1:
    player.src = 'movie2.mp4';
    break;
  case 17:
    player.src = 'movie3.mp4';
    break;
}

How to change html5 video source on click?

As mentioned in the edits I made, I managed to solve my problem by changing button.onclick to button.addEventListener() and changing source.src to source.getAttribute("src").

---

Related Topics