简体   繁体   English

完成后重定向全屏自动播放HTML5视频

[英]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. 首先,我知道这个问题已经被其他人提出,但是我不知道为什么我无法使它起作用,我对javascript相对陌生,并且只有基本的了解。

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): 所以这是我的代码,这是打开body标记后的第一行代码(重定向是相对于网站的路径,因为该网站的页面尚未发布,我尝试将其重定向到google,同时也进行了运气测试):

<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! 任何帮助将不胜感激,谢谢!

In your script tag, use type= instead of src= . 在您的script标签中,使用type=而不是src=

src should be used when referencing a javascript file from another location. 从其他位置引用javascript文件时,应使用src

Additionally, you should have a semicolon after the "addEventListener" line. 此外,在“ addEventListener”行之后应该有一个分号。

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

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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM