gpt4 book ai didi

javascript - 跨浏览器处理 HTML5 视频标签事件

转载 作者:行者123 更新时间:2023-11-30 13:35:39 25 4
gpt4 key购买 nike

以下代码应该播放视频然后重定向到另一个页面。它适用于 Safari 和最新版本的 Chrome ( http://www.brigadapictures.com/Home_test.html )。

我可以借助一些帮助让它在其他浏览器上执行。至少,我需要它在遇到问题时立即重定向(而不是显示空白的黑屏)。

<video src="http://brigadapictures.com/images/image1.mov"; id="myVideo" autoplay height="434" width="770">
</video>

<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
function myHandler(e) {
if (!e) {
e = window.event;
}
top.location.href = "http://www.brigadapictures.com/Home.html";
}
</script>

最佳答案

目前 Google Chrome、Safari(即 webkit)和 Fx 3.5+ 仅支持 HTML5 视频对象 MSDN确实有一篇关于 HTML5 和视频的文章所以 IE10 可能已经加入了这个行列

对于所有其他浏览器,我会在尝试显示视频标签之前使用脚本进行重定向

这是来自 Adobe about codecs and how to control the movie with JS 的一些信息

这是一个很好的HTML5 tutorial I found

他们建议video for everybody或我为 IE8 修改的这段代码:

function supports_video() {
return !!document.createElement('video').canPlayType;
}

我创建了 this page从你的页面,但我在 Firefox 中得到 206 部分内容。 Chrome 完美运行。也许是 byte serving process需要或 Firefox 只需要指定的另一个文件 here使用示例页面 here

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML5 video page</title>

<script type="text/javascript">
function supports_video() { // test the availability of video support
var v = document.createElement('video');
return v && v.canPlayType;
}
function goHome() {
top.location.replace("http://www.brigadapictures.com/Home.html"); // do not want to break the back button
}
window.onload=function() {
if (supports_video) {
var video = document.getElementById('myVideo'); // not sure how IE8 gets to this line, but it does
if (video && video.addEventListener) video.addEventListener('ended', goHome, false);
else goHome(); // IE8 peculiarity.
}
}
</script>


</head>
<body>
<script type="text/javascript">
if (supports_video) {
document.write('Here <a href="image1.mov" target="_blank">this video</a> is supposed to appear:<br /><video src="image1.mov" id="myVideo" autoplay="true" height="434" width="770">Video not supported anyway</video>');
}
else {
alert('Sorry, this browser does not support HTML5 video, redirecting...')
goHome();
}
</script>
</body>
</html>

关于javascript - 跨浏览器处理 HTML5 视频标签事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5014321/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com