Redirect html5 video after play

Question

I have an html 5 video which i remove the control buttons and added a js code in order for the user to play the video when the video is clicked. What I need to do is to bind an additional script that will redirect the page after the video plays without a page reload. Below is my js code.

function play(){
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);
}

And Here is my HTML5 Video Code

<video id="video" width="770" height="882" onclick="play();">
<source src="video/Motion.mp4" type="video/mp4" />
</video>

Answer 1

<script src="text/javascript">
// Do not name the function "play()"
function playVideo(){
    var video = document.getElementById('video');
    video.play();
    video.addEventListener('ended',function(){
        window.location = 'http://www.google.com';
    });
}
</script>
<video controls id="video" width="770" height="882" onclick="playVideo()">
    <source src="video/Motion.mp4" type="video/mp4" />
</video>

Here is a list of media events to which you can bind: http://dev.w3.org/html5/spec/Overview.html#mediaevents

Answer 2

I found this on another site. It appears to work well...

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
    </script>
    <script type="text/javascript">
      $(document).ready(function(){   
       $("#myVideo").bind('ended', function(){
          location.href="http://www.localhost.com";   
       }); 
      });
    </script>

    <video id="myVideo" width="320" height="240" controls="controls">
      <source src="movie.mp4" type="video/mp4" />
      <source src="movie.ogg" type="video/ogg" />
        Your browser does not support the video tag.
    </video>

Answer 3

Is there a way to modify this so it works with videos that autoplay? I thought the src="text/javascript" instead of type="text/javascript" was what was killing me, then I realized that I was getting inconsistent results across several browsers. As best I can track it, those that properly interpret the autoplay aren't executing this code properly because technically there's no 'onclick'; the video just goes on its merry way on its own, never triggering the function.

Answer 4

 <script>
      var vid = document.getElementById("myvideo");
      vid.onended = function() {
            window.open("index.html", "_self");
      };
</script>
<video controls id="myvideo" width="770" height="882">
    <source src="video/Motion.mp4" type="video/mp4"/>
</video>

Answer 5

Ashley's code snippet worked for me, though I had to make sure not to use the "loop" parameter in the video tag, otherwise it didn't work.

Also, I was able to have it autoplay, as you can see in this example:

<video id="thevideo" width="1280" preload="auto" autoplay="autoplay"> 
  <source src="your-video.mp4" type="video/mp4" />
  <source src="your-video.ogv" type="video/ogg" />
  Your browser does not support the video tag.
</video>

Answer 6

If you want to avoid hard coding URLs in your application, and you just want to reset your video and not necessarily navigate to another page, I found this to be quite neat.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" /> 
<script type="text/javascript">
            $(document).ready(function(){   
                $("#yourVideoID").bind('ended', function(){
                    location.reload(false);                     
                }); 
            });
</script>

You don't need to specify a URL, the current page containing your video is reloaded from the cache (if possible) so you don't have the overhead of talking to the server again just to redisplay the video.