Question

我有一个视频播放页面加载，当视频播放完毕后，脚本应该重定向到另一个网址。
虽然视频播放后它没有重定向。

SCRIPT：

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>

尝试了这里的每个脚本。 How can I redirect to a URL after a HTML video has ended?

似乎没有解决我的问题。

我在Google Chrome版本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>

Answer 1

尝试

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();

请参阅此Fiddle

Answer 2

您可以使用：video.onended 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>

视频在播放后无法重定向

2 个答案: