<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>
更多推荐
发布评论