<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>我想在完成播放时重定向到不同的页面。 这可能吗?
我不想试图“等待”视频本身占用的时间,因为它可能需要一段时间才能加载,并且无法正常播放。
具有非工作答案的当前代码在上面。
<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>I want to redirect to a different page when a is done playing. Is this possible?
I don't want to try to "wait" for the amount of time that the video itself occupies, because it may take a while to load and it won't finish playing correctly.
The current code with the non-working answer is above.
最满意答案
为视频指定一个id并在事件侦听器之外创建事件处理程序。 请访问: PLUNKER和/或查看下面的代码段:
顺便说一下,我注意到给出的代码在<body>的起始标记之前有<style>和<script>标记。 唯一应该在<body>标签之前的东西是它唯一的兄弟是</head>的结束标记。 复制布局在我的演示中的方式,你应该没问题。 将<style>放在</body>的结束标记之前的<head>和<script> </body> 。
SNIPPET
<!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>Give the video an id and create the event handler outside the event listener. Go to: PLUNKER and/or review Snippet below:
BTW, I noticed the code given has <style> and <script> tags before the starting tag of <body>. The only thing that should ever be before the <body> tag is it's only sibling that being the end tag of </head>. Copy the way the layout is in my demos and you should be OK. Place <style> in <head> and <script> before the closing tag of </body>.
SNIPPET
<!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>
更多推荐
发布评论