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

【问题标题】：Redirect full-screen autoplaying HTML5 video when finished完成后重定向全屏自动播放 HTML5 视频
【发布时间】：2016-04-28 17:42:23
【问题描述】：

首先我知道这个问题已经被其他人问过了，但我不知道为什么我不能让它工作，我对 javascript 比较陌生，只是有一个基本的了解。

因此，我的网站中有一个链接，可将您带到自动播放的全屏视频页面。我已经完成了。但是我已经看了又看并尝试了很多方法，以使其在视频完成后重定向到我网站中的另一个页面（它是重定向到的页面的介绍视频。）我将其设置为在视频播放的确切长度之后重定向，但如果发生任何缓冲，互联网速度较慢的用户将在完成之前被重定向。

所以这是我的代码，这是紧接在开始正文标记之后的第一行代码（重定向是一个站点相对路径，因为该站点的此页面尚未发布，我尝试在测试时将其重定向到谷歌没有运气）：

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

任何帮助将不胜感激，谢谢！

【问题讨论】：

How can I redirect to a URL after a HTML video has ended?的可能重复
您的代码有效。我试过了here
@AniMenon 是的，但是脚本标签（在 jsfiddle 中未使用）引用的是源文件，而不是类型。

标签： javascript html redirect video

【解决方案1】：

在您的script 标签中，使用type= 而不是src=。

src 应该在从其他位置引用 javascript 文件时使用。

此外，您应该在“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>

【讨论】：

非常感谢，我一直在拼命试图让它工作，我确实做了另一件事：所以首先我将你的脚本代码直接粘贴到我有我的脚本的地方，然后它不起作用，因为我想我必须在视频之后移动脚本。我在它下面有一个 div 元素，有一些其他的脚本试图这样做，我已经注释掉了，但是，在视频之后的那个空的 div 元素中它完美地工作！好吧，我摆脱了那里的愚蠢警报代码行，因此您不必单击“确定”来重定向。正是我想要的谢谢！
@Wesely 不客气。请将此标记为答案。是的，您要么需要将脚本放在头部并等待页面元素加载，要么将其放在视频组件下方（通常将脚本放在结束 body 标记之前）。

【解决方案2】：

所以这就是我所做的工作（以防其他人像我一样感到非常沮丧）。感谢杰姆！

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

【讨论】：