Redirect html5 video after play

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>

Answers:

Answer
<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

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

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

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

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.