0

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!

Wesely
  • 50
  • 3
  • Possible duplicate of [How can I redirect to a URL after a HTML video has ended?](http://stackoverflow.com/questions/20008778/how-can-i-redirect-to-a-url-after-a-html-video-has-ended) – Ani Menon Apr 28 '16 at 17:55
  • Your code works. I tried it [here](https://jsfiddle.net/ani1/m6hfmdk8/) – Ani Menon Apr 28 '16 at 17:55
  • @AniMenon yes, but the script tag (unused in jsfiddle) is referencing a source file, instead of a type. – Jem Apr 28 '16 at 17:57

2 Answers2

0

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>
Ani Menon
  • 27,209
  • 16
  • 105
  • 126
Jem
  • 4,313
  • 2
  • 18
  • 20
  • Thank you so much I've been beating my head against the wall trying to get it to work, I did do one other thing: So first I pasted your script code directly where I had my script and it didn't work because I guess I had to move the script after the video. I had a div element bellow it that had, had some other script in an attempt at this, which I had commented out but, in that empty div in element after the video it works perfect! Well, I got rid of the stupid alert line of code i had in there so you don't have to click OK on it to redirect. Does exactly what I wanted Thanks! – Wesely Apr 28 '16 at 18:29
  • @Wesely You're welcome. Please mark this as answer. And yes, you'd either need to put the script in the head and wait for page elements to load, or put it below the video component (it's typical for scripts to be put before the closing body tag). – Jem Apr 28 '16 at 18:32
0

So this is what I did that worked (in case anyone else gets super frustrated like I was over this). Thanks to Jem!

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

<!--A skip link and my copyright in a div that I omitted from this post-->

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

</body>
Wesely
  • 50
  • 3