Can someone tell me how I can change a video by clicking on E01-E02-E03 etc.?
The video in the player only plays from here: <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
When I click E01-E02-E03 it opens directly to the link. When I click on an episode, I want it to play directly from the player. Is it simple to do it? Best regards
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
</head>
<body>
<video id="videoPlayer" class="video-js vjs-big-play-centered" controls preload="auto" width="593" height="364" poster="" data-setup="{}">
<b>Season 1</b>
<a href="https://vjs.zencdn.net/v/oceans.mp4">E01</a>
<a href="https://vjs.zencdn.net/v/oceans.mp4">E02</a>
<source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
</video>
<script>
const player = videojs('videoPlayer', {});
</script>
<script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
</body>
</html>I tried embedding the video link to the text only and couldn't make it play through the video player
You need to be calling player.src() to load a new source. Something like:
// You'll want to be more specific than `a` of course
Array.from(document.querySelectorAll('a')).forEach(a => {
a.addEventListener('click', e => {
e.preventDefault();
player.src(a.href);
});
});