Wesely Wesely - 7 months ago 107
Javascript Question

Redirect full-screen autoplaying HTML5 video when finished

First of all I know this question has been asked by others but I don't know why I cant get it to work, I'm relatively new to javascript and just have a basic understanding.

So I have a link in my site that takes you to a page of a full screen video that auto plays. That i have accomplished already. But I have looked and looked and tried so many things to get it to redirect to another page in my site upon completion of the video (its an intro video to the page that it redirects to.)
I had it set to redirect after the exact length of the video play but users with slower internet will be redirected before completion if any buffering happens.

So here's my code which this is the first lines of code immediately after the opening body tag (the redirect is a site relative path as this page of the site is not published yet, i tried making it redirect to google while testing too with no luck):

<script src="text/javascript">
video = document.getElementById('myvid');
video.addEventListener('ended',function() {alert('video is ended');
window.location.href = 'digital_gallery.html';})
</script>

<video id="myvid" class="full_screen" controls autoplay >
<source src="video/animation_project_hd_720p.mp4" type="video/mp4" >
</video>


Any help would greatly be appreciated, Thanks!

Jem Jem
Answer

In your script tag, use type= instead of src=.

src should be used when referencing a javascript file from another location.

Additionally, you should have a semicolon after the "addEventListener" line.

<script type="text/javascript">
  video = document.getElementById('myvid');
  video.addEventListener('ended',function() {
    alert('video is ended');       
    window.location.href = 'digital_gallery.html';
  });
</script>

<video id="myvid" class="full_screen" controls autoplay >
  <source src="video/animation_project_hd_720p.mp4" type="video/mp4" >
</video>