HTML5 video redirection

Question

Basically what I'm trying to do is make the video redirect to a different web page after it's finished playing (very similar to what YouTube uses for Playlists). I've tried doing a bit of research before asking this type of question but nothing seems to be working out for me.

Here's the code:

<video id="example_video_1" class="video-js vjs-default-skin"
  controls preload="auto" width="854" height="480"
  poster="images/thumbnailbackgrounds/AE-DageSide.jpg"
  data-setup='{"example_option":true}'>
  <source src="files/Clip1.mp4" type='video/mp4' />
</video>

score 0 · Accepted Answer · answered Jul 27 '13 at 23:11

Since it looks like you're using Video.JS for this, you should have a look at their docs:

https://github.com/videojs/video.js/blob/master/docs/index.md

Specifically, the API section:

https://github.com/videojs/video.js/blob/master/docs/api.md

In the "Events" section, it says:

ended

Fired when the end of the media resource is reached. currentTime == duration

So you'd need to get a reference to your player (also on that page):

var myPlayer = videojs("example_video_1");

and then listen for the ended event, and redirect from there:

function endedFunction(){
    window.location = 'http://www.example.com/';
}

myPlayer.on("eventName", endedFunction);

Thank you M Sost and Bram Vanroy for the helpful posts. The issue has been resolved — Jeffrey Byfuglien, Jul 27 '13 at 23:54

score 0 · Answer 2 · edited May 23 '17 at 11:57

0

As borrowed from this answer, try the following. And you don't need video.js for this. HTML

<video id="example_video_1" class="video-js vjs-default-skin"
  controls preload="auto" width="854" height="480"
  poster="images/thumbnailbackgrounds/AE-DageSide.jpg"
  data-setup='{"example_option":true}'>
  <source src="files/Clip1.mp4" type='video/mp4' />
</video>

JavaScript

<script>
    var video = document.getElementsByClassName("video-js");

    // Or select element by HTML tag
    // var video = document.getElementsByTagName('video')[0];

    video.onended = function() {
      window.location.href = "www.yoururl.com";
    }
</script>

Ought to work.

edited May 23 '17 at 11:57

Community

1
1

answered Jul 27 '13 at 23:21

Bram Vanroy

27,032
24
137
239

This will also work, although it should be noted that Video.JS wraps the video/alters the DOM, changing the ID for the video element. See example here: http://www.videojs.com/. The source element has an ID of home_video, but after page load, the video element then gets an ID of home_video_html5_api – M Sost Jul 27 '13 at 23:37

HTML5 video redirection

2 Answers2

Linked