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')" />