HTML5 视频暂停时显示海报图像或暂停按钮?

2024-01-30

您好,我正在为 iPad 编写一个本地网站,并且有一个没有控件的视频,点击时会播放和暂停。视频暂停时能否显示海报图片?或者在中间显示一个暂停按钮?这是我用于播放和暂停的代码:

<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
var overlay = document.getElementById('video-overlay');
var video = document.getElementById('video');
var videoPlaying = false;
overlay.onclick = function() {
if (videoPlaying) {
    video.pause();
    videoPlaying = false;
}
else {
    video.play();
    videoPlaying = true;
}
}
}//]]>  

</script>

以及视频的 HTML

<div id='video-overlay'></div>
<video width="768" height="432" poster="thumbnail2.jpg" id='video'>
<source src="PhantomFuse3_TechVideo_h264.mp4"  type="video/mp4">
</video>

另一种解决方案是调用:

video.load()

它将重新显示海报图像。它将在下次交互时重新启动视频,但您可以保存时间戳并根据需要从那里开始播放。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML5 视频暂停时显示海报图像或暂停按钮? 的相关文章

  • HTML2canvas 和 Canvas2image,下载的屏幕截图不显示我的 HTML 图像

    我一直在开发一个 HTML 页面 我想将其转换为图像 我一直在使用 html2canvas 和 canvas2image 脚本并采用此代码http jsfiddle net 8ypxW 3 http jsfiddle net 8ypxW 3
  • 在为 RXJS 可观察量编写测试时,如何避免让调度程序通过我的业务逻辑?

    我发现使某些测试通过的唯一方法是显式地将调度程序传递给函数 为了便于说明 请考虑以下函数 function doStuff stream return stream delay 100 filter x gt x 2 0 map x gt
  • 如何通过php获取网页的Open Graph协议?

    PHP 有一个简单的命令来获取网页的元标记 get meta tags 但这仅适用于具有名称属性的元标记 然而 开放图谱协议如今变得越来越流行 从网页获取 opg 值的最简单方法是什么 例如 我看到的基本方法是通过 cURL 获取页面并使用
  • 对使用phonegap和钛的质疑[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 最近我听说了 PhoneGap 和 Titanium 移动网络应用程序的开发 我分析了这两个 Web 应用程序 并了解了如何使用它们以
  • Jquery 中的动态滚动位置

    请帮助我解决以下情况 我有 3 个页面 当滚动到达第二页时 用户滚动页面 它必须找到特定的 ID 然后触发一个函数 一旦第三页开始 另一个函数就会触发 根据要求我不应该使用任何插件
  • 如何更改已上传的 Firebase 存储图像文件名?

    我需要更改已上传到 firebase 存储中的文件名 因为 在 firebase 存储中上传图像后 我将 url 保存在 firebase 数据库中的特定子 文件夹 下 但是 当我将图像移动到另一个子 文件夹 时 我需要根据新名称更改存储中
  • Javascript - 将值从下拉框传递到 Google Maps API

    我正在使用 Google 地图 API 为一家出租车公司创建报价表 目前 用户在 2 个文本框中输入出发点和接载点 API 会计算两点之间的距离以及行程费用 我正在尝试添加两个具有设定位置的下拉框 以便用户可以选择这些位置之一或使用文本框输
  • 如何延迟加载嵌入在 iframe 上的 YouTube 视频?

    如何将延迟加载应用于iframe嵌入视频 我尝试添加loading eager loading auto and loading lazyload 您可以使用srcdoc你里面的属性iframe标签来加载图像 请参阅以下示例作为参考
  • 如何在 Angular 中从父组件访问子组件?

    I have mat paginator在子组件a中 如下所示 子组件 html
  • 我应该在哪个方法中设置 UITextField 的委托?

    在 viewDidLoad 或 init 方法中设置 UITextField 的委托是一个好习惯吗 我尝试在 init 方法中将委托设置为 self 但它没有调用相应的委托方法 当我将代码移动到 viewDidLoad 中时 它注册为将 s
  • 如何将送货地址复制到帐单地址

    我想知道是否可以将送货地址复制到帐单地址 当用户单击与送货地址相同的复选框时 送货地址值将被复制到账单输入字段 我完成了大部分部分 但我不确定如何将选择菜单 状态 值复制到帐单地址 我真的很感谢任何帮助 My code document r
  • 淡出和循环一组 div 的最佳方式

    假设我有以下 div div class a You are funny div div class b You are smart div div class c You are cool div 最好的展示方式是什么div a持续 5
  • 查询为空 Node Js Sequelize

    我正在尝试更新 Node js 应用程序中的数据 我和邮递员测试过 我的开发步骤是 从数据库 MySQL 获取ID为10的数据进行更新 gt gt 未处理的拒绝SequelizeDatabaseError 查询为空 我认识到 我使用了错误的
  • Select2 下拉列表动态添加、删除和刷新项目

    这让我发疯 为什么 Select2 不能在其页面上实现清晰的方法或示例如何在 Select2 上进行简单的 CRUD 操作 我有一个 select2 从 ajax 调用获取数据
  • JavaScript 代码在不使用 ActiveX 的情况下截取网站屏幕截图

    我有一个用户与之交互的 JavaScript 应用程序 我需要保存当前界面的外观 裁剪出我需要的部分 或者通过指定div只拍摄我需要的部分 然后发送回服务器 显然任何外部服务都无法做到这一点 我需要一个 JavaScript 或Flash
  • 为什么这个 SKPhysicsJointPin 不能将这 2 个精灵保持在一起?

    我显然不太了解 SKPhysicsJoint 但是除了 Apple 文档之外 网上的信息还很少 下面的代码有什么问题 我认为应该保持头部和颈部永久连接 我的意图是它们就像两张带有大头针的纸 这样它们可以旋转一点 但不仅仅是完全分开 当我运行
  • 三级十进制有序列表 CSS

    我有一个 html 中的三级有序列表 我想为其提供如下样式 1 Item 1 1 1 Item 2 1 1 1 Item 3 下一个 plunker 中有一个 html 示例 http plnkr co edit DqhZ5pJILTUHG
  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react
  • 单击列表时使用 bootstrap Dropdown 防止下拉菜单消失

    我正在使用使用引导下拉菜单 http twitter github com bootstrap javascript html dropdowns生成下拉菜单 我想防止点击菜单时菜单消失 我已经实现了以下代码 但它不起作用 知道如何修复它吗
  • 用于 C# XNA 的 Javascript(或类似)游戏脚本

    最近我准备用 XNA C 开发另一个游戏 上次我在 XNA C 中开发游戏时 遇到了必须向游戏中添加地图和可自定义数据的问题 每次我想添加新内容或更改游戏角色的某些值或其他内容时 我都必须重建整个游戏或其他内容 这可能需要相当长的时间 有没

随机推荐

  • 我如何知道库是服务器端、客户端还是两者?

    dart html 是一个客户端库 而 dart io 是一个服务器端库 因为这是显而易见的 但是一个时髦的库怎么样 http pub dartlang org packages http pub dartlang org packages
  • 为什么带有 T: 类约束的泛型方法会导致装箱? [复制]

    这个问题在这里已经有答案了 为什么将 T 限制为类的通用方法会在生成 MSIL 代码中包含装箱指令 我对此感到非常惊讶 因为肯定由于 T 被限制为引用类型 所以生成的代码不需要执行任何装箱 这是 C 代码 protected void Se
  • 仅在某些条件下使用什么 RxJava 运算符来链接可观察量

    我正在 RxJava Android 中开发一个完整的应用程序 试图使事情尽可能成为 Rx 方式 我认为我已经实现了我想要的目标 但现在我遇到了一个问题 我确信存在更好的方法来做到这一点 它包括 从 Observable 获取布尔值 A 如
  • TypeScript 升级后 Promise 返回类型错误

    Using typescriptv2 3 4 以下代码运行良好 getStuff Promise
  • 如何在 Angular 7 中使用 JavaScript 代码?

    我正在尝试在移动屏幕上使用MaterializeCSS 的帮助下制作一个可折叠的导航栏 并且需要在其中使用JavaScript 代码 我应该在哪里编写这段 JavaScript 代码 这是我想使用的代码 document ready fun
  • 如何用C++限制循环中的FPS?

    我试图使用带有 chrono 和 thread 的 C 来限制执行相交检查的循环中的每秒帧数 这是我的代码 std chrono system clock time point now std chrono system clock now
  • 如何绕过指定“Host”标头来访问 Ingress 控制器指向的服务?

    我的入口控制器正在工作 我可以使用以下命令访问集群外部的服务http externalIP path使用来自 RestClient 的 HTTP GET 请求 但是 我必须指定 Host 标头与value host 我的 Ingress 资
  • 如何使用 CSS 设置代码列表样式?

    我想使用 CSS 在 HTML 文档中显示编程语言代码片段以及 HTML 代码 我希望它缩进并采用固定宽度的字体 我正在考虑类似的事情 blockquote my code here my code here also blockquote
  • 在 TFS 项目中查找标签

    我目前正在使用以下代码通过指定标签查找 tfs 项目内的分支 TfsTeamProjectCollection tfs new TfsTeamProjectCollection new Uri tfsuri var vcs tfs GetS
  • 如何更改 Subclipse 中的用户凭据?

    我正在使用 Subclipse Eclipse 中的 Subversion 集成 我现在想更改 subclipse 中的用户凭据 我怎么做 即使用另一个用户帐户登录 Subversion 删除或重命名 Eclipse 配置文件夹中的 Ecl
  • 如何在JavaFX中使用CSS制作动画?

    我想改变风格Node通过更改其样式类别 Button button new Button button getStyleClass add class1 button setOnMouseClicked new EventHandler
  • 如何获取我的IP地址? [复制]

    这个问题在这里已经有答案了 我有一个 serverSocket 我想知道 IP 地址 但是 listenSocket getInetAddress toString I get 0 0 0 0 如何获取 IP 地址或 如果启用了两个连接 其
  • NodeJS 读取/写入文件到网络驱动器

    我有一个使用 fs createWriteStream 将文件写入磁盘的脚本 我现在想要实现的目标是将这些文件写入共享网络驱动器 目录如下 hostname scratch reece 我在 Windows 上运行这个脚本 但是当我部署它时
  • Twitter API - 注销

    我在我的网络应用程序中使用 OAuth 用户可以使用 twitter 登录 我想添加 切换 twitter 帐户 按钮 该按钮实际上会清除会话 然后打开authorize url 由于清除我的网络应用程序中的会话不会注销 twitter 因
  • 如何仅将 jquery 应用于移动设备?

    我只需要为移动浏览器应用以下 jquery 这是为了重新排序引导列的位置 我该怎么做呢 需要用什么东西包裹起来吗 总是很难检测到它是移动设备的浏览器还是带有触摸屏的笔记本电脑 因此 不要检测它 如果您担心屏幕尺寸 那么我会建议您检测屏幕尺寸
  • 如果没有有效的选择,如何返回到第一个 if 语句

    如果没有正确满足条件 如何让 Python 移动到 if 语句的顶部 我有一个基本的 if else 语句 如下所示 print pick a number 1 or 2 a int raw input gt if a 1 print th
  • 从鼠标坐标到 3d 的点-三角形相交?

    我知道如何测试点和三角形之间的交点 但是我不明白 如何使用鼠标坐标将点的起始位置精确地移动到屏幕平面上 因此点角度应该根据鼠标光标在屏幕上的位置而变化 这也应该起作用完美的是 无论我在 OpenGL 应用程序中使用哪个透视角度 因此不同透视
  • 如何删除fiddler安装的根CA证书

    Fiddler 有助于添加唯一的根 CA 证书来拦截 HTTPS 流量 添加此证书后 如何删除它 两种方式之一 1 禁用 HTTPS 解密并单击标题为 删除拦截证书 的按钮 2 打开 CertMgr msc 打开个人和受信任存储 然后使用根
  • 以编程方式复制 WPF 控件

    我有一个选项卡控件 当用户想要添加到它时 我想复制几个已经存在的元素 而不仅仅是引用它们 现在 到目前为止我只是硬复制了我想要的变量 但我在自动调整大小代码中出现了裁剪器 也就是说 在调整窗口大小时 复制的元素明显落后于原始元素 此外 随着
  • HTML5 视频暂停时显示海报图像或暂停按钮?

    您好 我正在为 iPad 编写一个本地网站 并且有一个没有控件的视频 点击时会播放和暂停 视频暂停时能否显示海报图片 或者在中间显示一个暂停按钮 这是我用于播放和暂停的代码