Question

＆＃13;

<style>
video
{
    display:table;
    width:100%;
    height:100%;
}
</style><script type="text/javascript">
var myVideo = document.getElementsByTagName("video")[0];

myVideo.addEventListener("ended", function() {
	window.location = "http://mariopaintforums.ddns.net/secret/contin_midi/";
}, true);
</script><body><center><video src="vid.mp4" autoplay>ur brosr is no html5 coocpopabl</video></center></body>

＆＃13;

我希望在完成播放后重定向到其他页面。这可能吗？

我不想尝试等待＆＃34;视频本身占用的时间，因为它可能需要一段时间才能加载，并且无法正常播放。

上面有非工作答案的当前代码。

Answer 1

您可以收听播放器的ended event，并在回调功能中执行重定向。

// Alternatively, use a jQuery selector to get your video element.
var myVideo = document.getElementsByTagName("video")[0];

myVideo.addEventListener("ended", function() {
    console.log("The video has just ended!");
    // Let's redirect now
    window.location = "your_new_url";
}, true);

Answer 2

为视频指定id并在事件侦听器外创建事件处理程序。请转到：PLUNKER和/或查看以下代码段：

顺便说一句，我注意到所提供的代码在<style>的起始标记之前有<script>和<body>个标记。 <body>标记之前唯一应该是</head>的结尾标记只是兄弟姐妹。复制布局在我的演示中的方式，你应该没问题。将<style>放在<head>和<script>的结尾标记前</body>。

SNIPPET

＆＃13;

<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <h1>index.html</h1>
  <video id="vid1" class="vid" src="http://html5demos.com/assets/dizzy.mp4" controls autoplay></video>

  <script>
    var vid = document.getElementById('vid1');
    var loc = 'http://example.com';
    vid.addEventListener('ended', function(e) {
      jumpTo(loc);
    }, false);

    function jumpTo(url) {
      window.location = url;
    }
  </script>
</body>

</html>

＆＃13;

等到HTML5视频播放完毕

2 个答案: