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

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

转载作者：行者123 更新时间：2023-11-30 13:35:39

25

4

以下代码应该播放视频然后重定向到另一个页面。它适用于 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

文章推荐： c# - 如何使用 C# 提取括号之间的所有字符串？

文章推荐： javascript - 从给定的 html 中剥离图像 src

文章推荐： javascript - 我无法理解此 JavaScript 语句中的括号

文章推荐： Javascript、jQuery.extend 和 "new"

ios - 跨 Storyboard播放背景音乐。
在我的应用程序中播放背景音乐时遇到问题。首先，我在第一个 Storyboard View Controller 中的 ViewDidLoad 方法中开始播放音乐。即使我从一个页面跳转到另一个页面，它
arrays - 跨 Bigquery 数组的非重复计数
我想跨行连接数组，然后进行不同的计数。理想情况下，这会起作用: WITH test AS ( SELECT DATE('2018-01-01') as date, 2 as value,
git - 跨 repo 依赖的最佳实践
这是一个场景: Repo A 是一个包含大量模块和依赖项的怪异代码。安装起来并不容易。它由其他人维护并托管在 Github 上。 Repo A 包含一个非常有用的模块 X，并且几乎不依赖于 Repo
docker - 跨 docker 集群调度任务的最佳方法是什么？
目前，我在一台服务器上运行了一个应用程序。有一个 crontab 设置，因此根据指定的规则，在某些时间运行任务。现在，我正在考虑将我的应用程序迁移到 docker 容器中，以便我能够独立运行我的应用
lua - 跨 Lua 状态复制全局表
我有一个全局表，我想在两个不同的 Lua 状态之间保持同步。根据我所阅读和理解的内容，唯一的方法似乎是，在我的 C 后端，在状态之间进行表的深层复制(如果表已被修改)。有没有更好的办法？另外，我看
wcf - 跨 basicHttpBinding 的事务
我们目前有一个 asmx webservice，它公开了一个方法来对 Sql 数据库进行各种更新，内部包装在 SqlTransaction 中。我正在 WCF 中重写此服务，我们希望将现有方法拆分为
qt - 跨 Qt 线程共享数据
我是 Qt 的新手，所以请原谅这个问题的简单性，但我对 Qt 线程有点困惑。假设我有 3 个线程:主要的默认 GUI 线程和我自己创建的 2 个线程(称为 WorkerThread)。我的每个 Wor
django - 跨 Django 项目共享数据库
我们的产品有一个 Restful API 和一个服务器渲染的应用程序(CMS)。两者共享数据库。两者都是用django编写的两者所需的字段和模型并不是相互排斥的，有些仅针对 API，有些针对 CMS
database - 跨 4 个表的多对多关系
我正在实现一个基于角色的访问控制系统，它具有以下数据库表。 groups --------- id (PK) name level resources --------- id (PK) name r
perl - 跨 Catalyst 应用程序共享身份验证
我有三个应用程序，为了便于管理，我希望将它们分开。他们按照建议作为 Plack 服务器运行 here , 代理在 nginx 后面。我想有一个单独的应用程序来管理登录，并在所有其他应用程序之间共享该
iphone - 跨 View 沟通
我的主窗口上有一个 UIWebView。我可以通过我的第二个 View Controller 来控制它吗？如果可以的话你能给我举个例子吗？最佳答案是的，你可以。 “如何”是一个基本的 Cocoa/
delphi - 跨 LAN 的安全通信
我想制作一个小型应用程序，从连接到串行端口的设备收集数据，并将其通过 LAN 传递到另一个应用程序，后者将其存储在数据库中。我已经在一台 PC 上的一个应用程序中完成了此操作，因此实际上会将应用程序
c# - 跨 AppDomain 异步方法调用
从主 AppDomain，我试图调用在不同 AppDomain 中实例化的类型中定义的异步方法。比如下面的类型MyClass继承自 MarshalByRefObject并在新的 AppDomain
python - 跨 LiveServerTestCase 测试方法保留数据？
因为 LiveServerTestCase继承自 TransactionTestCase ，默认行为是在每个测试方法结束时删除测试数据。我想用LiveServerTestCase类，但保留方法之间的测
wpf - 跨 View 模型的命令
我正在开发我的第一个 WPF/MVVM 应用程序，但我在命令知识方面遇到了限制! 这是我的场景。我有一个窗口——Customer.xaml。它包含 2 个用户控件查看CustomerSearch
c# - 跨 ViewModel 发布更新？
这是我的 WPF 应用程序模型的简化版本: Employee +Name:string Client +Name:string +PhoneNumber:string Appointmen
mercurial - 跨 Mercurial 子存储库进行身份验证
我有一个 mercurial 存储库，它使用子存储库功能(如 .hgsub 文件中定义的)引入依赖项，但我正在努力让它在 TeamCity 中工作。我启用了 mercurial_keyring 扩展
azure - 跨 Azure 租户的虚拟网络对等互连是否可行？
我正在尝试使用新的 Azure 虚拟网络公共(public)预览版的对等互连功能来加入我在两个不同订阅(即不同租户)上拥有的两个网络。这可能吗？我没有看到任何其他说法，但是当我尝试在 PowerShe
SVN 跨 2 个不同存储库的差异
我有 2 个存储库。由于主干代码位于一个 protected 存储库中，因此我进行了 checkout ，然后 checkin 到另一个存储库(因为用户没有第一个 protected 存储库的权限)。
C# 跨 dll 调试
我有一个项目，其调用结构与此类似: 主要项目/应用我的图书馆代码别人的库代码我的图书馆代码一切都是用 C# 编写的，我可以访问“其他人的库代码”。他们的代码不包含在我的项目中，因为它是开源的而

首页

博学

6Ren·AI

商城

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