Javascript 播放后重定向html5视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10421471/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Redirect html5 video after play
提问by jalf
I have an html 5 video which i remove the control buttons and added a js code in order for the user to play the video when the video is clicked. What I need to do is to bind an additional script that will redirect the page after the video plays without a page reload. Below is my js code.
我有一个 html 5 视频，我删除了控制按钮并添加了一个 js 代码，以便用户在单击视频时播放视频。我需要做的是绑定一个额外的脚本，该脚本将在视频播放后重定向页面而无需重新加载页面。下面是我的js代码。
function play(){
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);
}
And Here is my HTML5 Video Code
这是我的 HTML5 视频代码
<video id="video" width="770" height="882" onclick="play();">
<source src="video/Motion.mp4" type="video/mp4" />
</video>
回答by AlienWebguy
<script src="text/javascript">
// Do not name the function "play()"
function playVideo(){
var video = document.getElementById('video');
video.play();
video.addEventListener('ended',function(){
window.location = 'http://www.google.com';
});
}
</script>
<video controls id="video" width="770" height="882" onclick="playVideo()">
<source src="video/Motion.mp4" type="video/mp4" />
</video>
Here is a list of media events to which you can bind: http://dev.w3.org/html5/spec/Overview.html#mediaevents
以下是您可以绑定的媒体事件列表：http: //dev.w3.org/html5/spec/Overview.html#mediaevents
回答by Ashley
I found this on another site. It appears to work well...
我在另一个网站上找到了这个。它似乎运作良好......
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#myVideo").bind('ended', function(){
location.href="http://www.localhost.com";
});
});
</script>
<video id="myVideo" width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
回答by Joe Hundredaire
Is there a way to modify this so it works with videos that autoplay? I thought the src="text/javascript" instead of type="text/javascript" was what was killing me, then I realized that I was getting inconsistent results across several browsers. As best I can track it, those that properly interpret the autoplay aren't executing this code properly because technically there's no 'onclick'; the video just goes on its merry way on its own, never triggering the function.
有没有办法修改它，使其适用于自动播放的视频？我认为 src="text/javascript" 而不是 type="text/javascript" 是什么让我丧命，然后我意识到我在多个浏览器中得到了不一致的结果。尽我所能跟踪它，那些正确解释自动播放的人没有正确执行此代码，因为技术上没有“onclick”；视频只是按照自己的方式进行，从不触发该功能。
回答by sarveshwar gavhane
<script>
var vid = document.getElementById("myvideo");
vid.onended = function() {
window.open("index.html", "_self");
};
</script>
<video controls id="myvideo" width="770" height="882">
<source src="video/Motion.mp4" type="video/mp4"/>
</video>
回答by Isaac M
Ashley's code snippet worked for me, though I had to make sure not to use the "loop" parameter in the video tag, otherwise it didn't work.
Ashley 的代码片段对我有用，但我必须确保不要在视频标签中使用“循环”参数，否则它不起作用。
Also, I was able to have it autoplay, as you can see in this example:
此外，我能够让它自动播放，如您在此示例中所见：
<video id="thevideo" width="1280" preload="auto" autoplay="autoplay">
<source src="your-video.mp4" type="video/mp4" />
<source src="your-video.ogv" type="video/ogg" />
Your browser does not support the video tag.
</video>
回答by Manni Dee
If you want to avoid hard coding URLs in your application, and you just want to reset your video and not necessarily navigate to another page, I found this to be quite neat.
如果您想避免在您的应用程序中使用硬编码 URL，并且您只想重置您的视频而不必导航到另一个页面，我发现这非常简洁。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" />
<script type="text/javascript">
$(document).ready(function(){
$("#yourVideoID").bind('ended', function(){
location.reload(false);
});
});
</script>
You don't need to specify a URL, the current page containing your video is reloaded from the cache (if possible) so you don't have the overhead of talking to the server again just to redisplay the video.
您不需要指定 URL，包含您的视频的当前页面会从缓存中重新加载（如果可能），因此您无需为重新显示视频而再次与服务器通话。
