Advertisement

Video.js changing source, but does not show new source

javascript video.js

Community

edited 20 Jun, 2020

HunchoDevelo

asked 05 Nov, 2016

Sorry for my lack of knowledge on this topic

I have a script that changes the source of the video player. And it does just that. The only problem is that the Video.js player plays the first source assigned to it.

document.getElementById("vid-player_html5_api").innerHTML = "";

document.getElementById("vid-player_html5_api").innerHTML = "<source src='" + link + "' type='video/mp4'>";
document.getElementById("vid-player_html5_api").muted = false;

So if there were two buttons, and you clicked Button 1 it would change the source of the player and show the correct video. Then lets say you clicked Button 2 it would change the source of the player, but it would still show the same video it showed for Button 1

It is proven that it changes the source, I checked the Chrome Dev tools and surely enough it changed the source

How do I fix this?

Advertisement

Answer

You can try as below,

function playVideo(videoSource, type) {
  var videoElm = document.getElementById('testVideo');
  var videoSourceElm = document.getElementById('testVideoSource'); 
   if (!videoElm.paused) {
        videoElm.pause();
     }
    
   videoSourceElm.src = videoSource;
   videoSourceElm.type = type;
  
    videoElm.load();
    videoElm.play();
  }

<video id="testVideo" width="400" controls>
  <source id="testVideoSource">
</video>
<br/>
<input type="button" value="Play Video 1" onclick="playVideo('http://www.w3schools.com/html/mov_bbb.mp4', 'video/mp4')" />
<input type="button" value="Play Video 2" onclick="playVideo('http://www.w3schools.com/html/mov_bbb.ogg', 'video/ogg')" />

Advertisement