I've been experimenting with creating multiple links that can change the source of the video being played on a player when clicked.
Although I have come close to achieving my desired outcome, there is still one hurdle remaining:
Here's the HTML code snippet:
<video id="videoclip" width="640" height="480" controls preload="none">
<source id="mp4video" src="myvideo.mp4?dl=1">
</video>
<p><a href="#videoclip" id="videolink1">first video</a></p>
<p><a href="#videoclip" id="videolink2">second video</a></p>
<p><a href="#videoclip" id="videolink3">third video</a></p>
<p><a href="#videoclip" id="videolink4">fourth video</a></p>
And here's the corresponding Javascript code:
videocontainer = document.getElementById('videoclip');
videosource = document.getElementById('mp4video');
newmp4 = 'newvideo.mp4?dl=1';
videobutton = document.getElementById("videolink1");
videobutton.addEventListener("click", function(event) {
videocontainer.pause();
videosource.setAttribute('src', newmp4);
videocontainer.load();
videocontainer.play();
}, false);
While this current setup works well, it only allows me to switch between the first and second videos. My ultimate goal is to be able to click any of the other links (i.e., videolink2, videolink3, etc.) and have the corresponding video play instead.
Despite scouring various resources for hours, I haven't been able to overcome this challenge just yet.