1

I am trying to create an HTML video playlist and currently I am using vid.onended to detect when a video is done playing (based of the current video src) and then play the next video when the video ends. This works perfectly for the first video but for some reason it never plays the second video and jumps straight to the third video.

My code:

//add video playlist functionality to auto play next video based on id
var vid = document.getElementById("urlVideo");
vid.onended = function() {
  var video0 = "http://techslides.com/demos/sample-videos/small.mp4";
  var video1 = "https://media.w3.org/2010/05/sintel/trailer.mp4";
  var video2 = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
  if (vid.src = video0) {
    vid.src = video1;
  }
  if (vid.src = video1) {
    vid.src = video2;
  }
};
<video id="urlVideo" width="100%" height="460" controls autoplay>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

What am I doing wrong?

Edit:

Answer by Alen Toma works perfectly.

I Also managed to do it according to the current video source based on a comment by Quentin, For anyone else looking for how to do it explicitly with the current video source as the variable/condition, please see https://jsfiddle.net/redlaw/qjb5h7e9/9/

SuperStormer
  • 4,997
  • 5
  • 25
  • 35
trevor
  • 13
  • 4
  • Typo: `if (vid.src = video0) {` — That's an **assignment** not a comparison. – Quentin Dec 27 '20 at 22:02
  • hi @Quentn , if i say ```if (vid.src === video0) {``` then the video never plays the next video and stays on the first video when it ends, am I doing it correctly (source:https://stackoverflow.com/questions/3586775/what-is-the-correct-way-to-check-for-string-equality-in-javascript) – trevor Dec 27 '20 at 22:12
  • If `vid.src === video0` isn't true and you expect it to be true you need to look at `vid.src` and dint out what it really is. – Quentin Dec 27 '20 at 22:13
  • Ah I think you are right , I did a ```console.log(vid.src);``` and it returns a value of undefined, what would be a better way to check for the video src? – trevor Dec 27 '20 at 22:18
  • I found ```var videoTags = document.getElementsByTagName('video') for( var i = 0; i < videoTags.length; i++ ){ console.log( videoTags.item(i).currentSrc ) }``` and it then logs the correct video src but how would I write that into my if statement with my defined variables? code source:https://stackoverflow.com/questions/22241968/how-to-get-video-tag-src-using-javascript/22242004 – trevor Dec 27 '20 at 22:22
  • Thanks for pointing me in the right direction Quentin, I managed to capture and change the video source differently based on your comments thanks mate (solution based on our discussion can be seen here: https://jsfiddle.net/redlaw/qjb5h7e9/6/) – trevor Dec 28 '20 at 00:12

2 Answers2

1

I did make a small example below, it should help.

Have a look at this JSFiddle.

//add video playlist functionality to auto play next video based on id
var videoSrc = [
  "https://media.w3.org/2010/05/sintel/trailer.mp4",
  "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
]
var vid = document.getElementById("urlVideo");
var index = 0;
vid.addEventListener("ended", function() {
  var currentSrc = videoSrc[index];
  index += 1;
  if (index >= videoSrc.length)
    index = 0; // Make Loop and jump to the first video
  vid.src = currentSrc;
  vid.play();
  console.log(currentSrc)
}, true);

<video id="urlVideo" controls autoplay>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
user1438038
  • 5,821
  • 6
  • 60
  • 94
Alen.Toma
  • 4,684
  • 2
  • 14
  • 31
0

you must use an event listener for your video player like this code:

var vid = document.getElementById("urlVideo");
vid.addEventListener("ended", function() { /* your code*/ }, true);
HoM
  • 131
  • 1
  • 2
  • Hi, I edited my code according to your answer like so: ```var vid = document.getElementById("urlVideo"); var video0 = "http://techslides.com/demos/sample-videos/small.mp4"; var video1 = "https://media.w3.org/2010/05/sintel/trailer.mp4"; var video2 = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"; vid.addEventListener("ended", function() { if (vid.src === video0) { vid.src = video1; } if (vid.src === video1) { vid.src = video2; } }, true);``` but now it just plays the first video defined in html and nothing after it ends, am I doing it right? – trevor Dec 27 '20 at 22:39
  • apologies for code being untidy ran out of characters in comment field – trevor Dec 27 '20 at 22:42
  • add vid.play(); into your event listener function my friend. – HoM Dec 27 '20 at 22:52
  • I appreciate your help, but I am a bit lost here. What would the full code be for it to work? – trevor Dec 27 '20 at 22:57
  • After changing the video address, you need to play it again. like this: (vid.src === video0) { vid.src = video1; vid.play(); } if (vid.src === video1) { vid.src = video2; vid.play(); } – HoM Dec 27 '20 at 23:01