Detecting end of video with jQuery

Question

I have three videos that I am trying to detect when they end, and then navigate to another page.

The function seems to only work for the first video $vid1 and nothing happens to the $vid2 and $vid3 videos.

I came across this question, and sourced my code from there.

(I noticed in a comment that it stated that the 'correct' answer doesn't work in chrome)

How would I go about making this work for all videos?

JS

//variables
var $vid1 = document.getElementById("vid1");
var $vid2 = document.getElementById("vid2");  
var $vid3 = document.getElementById("vid3");

//functions
function Redirect1() {
    window.location.replace('ExamplePage1');
}

function Redirect2() {
    window.location.replace('ExamplePage2');
}

function Redirect3() {
    window.location.replace('ExamplePage3');
}

//events  

$vid1.addEventListener("ended", Redirect1, false);
$vid2.addEventListener("ended", Redirect2, false);
$vid3.addEventListener("ended", Redirect3, false);

HTML

<div class="videoResult vidOne">
   <video id="vid1" controls>
     <source src="#" type="video/mp4">
   </video>
</div>

<div class="videoResult vidTwo">
   <video id="vid2" controls>
      <source src="#" type="video/mp4">
   </video>
</div>

<div class="videoResult vidThree">
   <video id="vid3" controls>
      <source src="#" type="video/mp4">
   </video>
</div>

How do you know it's not working for the other videos, when the page gets changed as soon as the first video ends? Also note that you define the `Redirect2` function twice. — Rory McCrossan, Jul 01 '15 at 08:27
Thank you for noticing my typo, I corrected my spelling mistake. And the videos have the controls on them so I have the ability to select which video to play in what ever order @RoryMcCrossan — Jargonaut_, Jul 01 '15 at 08:38
But that's my point - the order is irrelevant. As soon as the first video ends (no matter if that's video1, 2, or 3) the page will be redirected. — Rory McCrossan, Jul 01 '15 at 08:40
That's actually what I want to happen. The videos are on the home page, As soon as the first video ends (whether it be video1, video2 or video3) it will redirect to another page. The page it is being redirected to has the option to navigate back to the home page - hopefully this makes sense @RoryMcCrossan — Jargonaut_, Jul 01 '15 at 09:07

Praveen Kumar Purushothaman · Answer 1 · 2015-07-01T08:38:46.630

0

May be, try this?

//functions
function Redirect1() {
    window.location.replace('./ExamplePage1');
}

function Redirect2() {
    window.location.replace('./ExamplePage2');
}

function Redirect2() {
    window.location.replace('./ExamplePage3');
}

edited Jul 01 '15 at 08:38

answered Jul 01 '15 at 08:28

Praveen Kumar Purushothaman

164,888
24
203
252

@MackieeE That's why I removed it.\ – Praveen Kumar Purushothaman Jul 01 '15 at 08:38
I have gone ahead and added the './' before the page names yet there is still no luck. - I just went and replace the pages with other URLs like, facebook, google and youtube to see if that would work. Yet only the first function is working? @praveenkumar – Jargonaut_ Jul 01 '15 at 08:44
@Jargonaut_ Can you try changing the order of the functions and let me know if still only the first one is working? – Praveen Kumar Purushothaman Jul 01 '15 at 08:46
1

I've tried to create a JS fiddle to try make this easier, but it isn't allowing me to save the fiddle. So here is a code pen -http://codepen.io/anon/pen/eNVZdd I will let you know when I've arranged the order of the functions. Thanks for your help @praveenkumar – Jargonaut_ Jul 01 '15 at 09:03
Sure. I will have a look at it @Jargonaut_! – Praveen Kumar Purushothaman Jul 01 '15 at 09:18
I changed the order of the functions and placed `Redirect2` above `Redirect1` - and it changed! `Redirect1` no longer works and `Redirect2` now works. @praveenkumar – Jargonaut_ Jul 01 '15 at 09:24
Grrr... That's crazy! – Praveen Kumar Purushothaman Jul 01 '15 at 09:59
Would you have any other suggestions on how to overcome this problem? @praveenkumar – Jargonaut_ Jul 01 '15 at 10:32
I am totally clueless buddy! – Praveen Kumar Purushothaman Jul 01 '15 at 10:36
1

Damn. Thanks for talking a look for me though :) - if you have a light bulb moment in the near future , be sure to get back to me ha – Jargonaut_ Jul 01 '15 at 10:40
I have checked my console log, and it says "cannot read property 'addEventListener' of null @praveenkumar – Jargonaut_ Jul 02 '15 at 05:34
Why do you use `eventListener` now? – Praveen Kumar Purushothaman Jul 02 '15 at 07:42
I've used the `addEventListener` the whole time for this bit of code? Should I not be using the `addEventListener` something else instead? @praveenkumar – Jargonaut_ Jul 02 '15 at 07:49
Sorry forgot. Checked it, but you are using by ID right? – Praveen Kumar Purushothaman Jul 02 '15 at 07:53
Yes, I am using `.getElementById();` @praveenkumar – Jargonaut_ Jul 02 '15 at 07:57

Detecting end of video with jQuery

1 Answers1