视频播放后不会重定向

Video Won't Redirect after Played

本文关键字：重定向 播放 视频      更新时间：2023-09-26

我有一个页面的视频播放加载，当视频播放完成后，脚本应该重定向到另一个URL。
尽管视频播放完成后它不会重定向。

脚本：

function playVideo(){
    var video = document.getElementById('video1');
    video.play();
    video.addEventListener('ended',function(){
        window.location = 'http://www.google.com';
    });
}

.HTML：

<video id="video1" autoplay="autoplay">
    <source src="missing.mp4" type="video/mp4" />
</video>

尝试了此处的所有脚本。如何在 HTML 视频结束后重定向到 URL？

似乎没有解决我的问题。

我正在运行谷歌浏览器版本 48.0.2564.109 m

完整的 HTML 供参考。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
  <link rel="stylesheet" href="css/styles.css?v=1.0">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endi
  f]-->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
 <script>
    playVideo();
    function playVideo(){
      var video = document.getElementById('video1');
      video.play();
      video.onended=function(){
         window.location ='http://www.google.com';
      }
 }
 </script>
  <style>
  body {margin:0;padding:0;}
video#video1 {width:100%;height:100%;}
  </style>
</head>
<body>
<video id="video1" autoplay="autoplay">
    <source src="missing.mp4" type="video/mp4" />
</video>

</body>
</html>

你可以使用 ： video.onend function(({} 让它工作。可能是更新的代码会帮助你。请尝试以下代码 

 <video id="video1">
   <source src="missing.mp4" type="video/mp4" />
 </video>
 <script>
    playVideo();
    function playVideo(){
      var video = document.getElementById('video1');
      video.play();
      video.onended=function(){
         window.location ='http://www.google.com';
      }
 }
 </script>

尝试使用

window.location.href = 'http://www.google.com';

交换播放和侦听器的注册也可能很有用。所以我会把js替换为：

function playVideo(){
    var video = document.getElementById('video1');
    video.addEventListener('ended',function(){
        window.location.href = 'http://www.google.com';
    });
    video.play();
}

编辑

我假设您的视频没有运行，因为您调用了palyVideo函数，而是因为它会自动启动。由于它不是由您的函数启动的，因此根本不会注册事件侦听器。

举一个简单的例子来证明尝试而不将其包装在函数中：

var video = document.getElementById('video1');
video.addEventListener('ended',function(){
    window.location.href = 'http://www.google.com';
});
video.play();

看到它在这个小提琴中工作

相关文章：