HTML5 video redirection

问题

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>

回答1:

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);

回答2:

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.

来源：https://stackoverflow.com/questions/17903346/html5-video-redirection

标签

javascript

html5

html5-video