视频完成后更改位置答案

【问题标题】：Change Location After video is finished视频完成后更改位置
【发布时间】：2018-03-31 15:11:51
【问题描述】：

我想让这个视频自动播放，一旦视频播放完毕，我想让它重定向到另一个页面，完全自动。没有点击或任何东西。我该怎么做？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>eve_</title>
<link rel="icon" rel="preload" href="images/evecircle.png" />
<style>

#video {
    margin-left:-10px;
    margin-top:-10px;
}

</style>

</head>

<body>
<script src="text/javascript">

function playVideo(){
    var video = document.getElementById('video');
    video.play();
    video.addEventListener('ended',function(){
       location.replace('https://stackoverflow.com/questions/49582133/no-idea-where-to-put-settimeout/49582203?noredirect=1#comment86172507_49582203'),
    });
}
</script>

<video controls id="video"  width="1300px" height="auto" preload="auto" autoplay="autoplay">
    <source src="images/shorteve.mp4" type="video/mp4"/>
</video>

</body>
</html>

【问题讨论】：

标签： javascript redirect video replace location

【解决方案1】：

您应该能够添加eventListener，然后在触发时调用您的函数。

<script type = 'text/javascript' >
  var video = document.getElementById('video');
  video.play();
  video.addEventListener('ended', onVideoFinished, false);

function onVideoFinished() {
  window.location.replace('...');
} </script>

【讨论】：

【解决方案2】：

确保在加载 HTML 之后调用 addEventListener（在 DOMContentLoaded 事件中）。

在DOMContentLoaded 事件之外调用document.getElementById('video') 时，大多数情况下它将返回null。

DOMContentLoaded 事件在初始 HTML 文档包含已完全加载和解析

document.addEventListener('DOMContentLoaded', function() {
  
  console.log("DOM fully loaded and parsed");
  var video = document.getElementById('video');

  video.addEventListener('ended', function() {
    console.log("The video has ended");
    alert("The video has ended");
    //location.replace('https://stackoverflow.com/questions/49582133/no-idea-where-to-put-settimeout/49582203?noredirect=1#comment86172507_49582203');
  });
});

<video controls id="video" width="200px" height="auto" preload="auto" autoplay="autoplay">
        <source src="https://www.w3schools.com/tags/movie.ogg" type="video/mp4" />
    </video>

【讨论】：

但这不会将用户重定向到另一个站点。这只是产生警报
只需取消注释重定向行并删除警报行
欢迎，请考虑作为答案:)