iPad html5 视频没有控件?

2024-07-04

这让我苦恼了一整天,但我不知道如何让 html5 视频播放器在没有本机控件的情况下工作。

我不想要任何控件,但如果我不包含它们,视频似乎不想播放,即使我在下面添加一些 javascript 试图强制它播放,它也适用于 iPhone 和多个浏览器,但 iPad 却没有,这很奇怪,有什么想法吗?

如果有帮助的话,这里有一些标记!

<video src="video.mp4" id="video" poster="image.jpg" onclick="this.play();"/></video>

$('#video').click(function(){
   document.getElementById('video').play();
});

iOS 不支持autoplay视频标签的属性。您似乎也无法使用 jQuery 绑定到视频元素中的单击事件(请参阅fiddle http://jsfiddle.net/LfBmF/2/).

解决方法是在视频元素上放置一个不可见的 div,并将播放视频的点击绑定到该元素(请参阅fiddle http://jsfiddle.net/LfBmF/7/):

HTML:

<div id="video-overlay"></div>
<video id="video" width="400" height="300">
      <source id='mp4'
        src="http://media.w3.org/2010/05/sintel/trailer.mp4"
        type='video/mp4'>
      <source id='webm'
        src="http://media.w3.org/2010/05/sintel/trailer.webm"
        type='video/webm'>
      <source id='ogv'
        src="http://media.w3.org/2010/05/sintel/trailer.ogv"
        type='video/ogg'>
</video>

CSS:

#video { border: 1px solid black; }
#video-overlay { position: absolute; width: 400px; height: 300px; z-index: 999;  }

jQuery:

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

iPad html5 视频没有控件? 的相关文章

  • 使用“.text”或“.textContent”时保留换行符。可能的?备择方案?解决方法?

    如果我从一个元素中获取一些 html 然后尝试将其分配为另一个元素的文本内容 则换行符是not保留 至少在最新的 Firefox 和 Chromium 中没有 因此 例如 以下代码 使用合理的 html 会生成其中换行符被空格替换的输出 好
  • 是否必须定义

    使用按钮标签时 是否必须定义 type 属性 或者仅具有语义
  • 同一产品的多个图像,可访问性要求

    对于具有单个产品的多个图像的网页 例如具有不同角度的图像 是否有要求alt每个图像的标签 在亚马逊上查看示例 似乎他们只有一个alt第一张产品图片上有标签 但之后就没有了alt tag or aria相关标签 第一个例子在这里 https
  • Jquery 密码字段的默认值

    我在用这个 Jquery 插件 http mudge github com jquery example 用于使用单击时消失的文本填充输入 它对于密码字段来说并不理想 因为所有内容都显示为点 在开始输入之前使默认文本在密码字段中可见的好方法
  • 显示工具提示时 d3.event 的 x 和 y 坐标不正确

    我正在尝试在水平条形图上显示工具提示 如果我稍微向下滚动页面 此工具提示将无法正常工作 如果条形图在视图中且无需滚动 则此方法效果很好 但是 如果我在图表上方添加更多元素 当我向下滚动时 工具提示会从鼠标指针处移至更高位置 请帮助我解决这个
  • 动态 iframe onload 未触发?

    我认为这是可能的 因为有大量类似的问题 已解决 但似乎没有一个涉及动态创建的 iframe 基本上 我使用 jquery 创建一个临时 iframe 来加载文件 从通过 ajax 调用提供的文件路径 然后打开文件下载提示 一切正常 但为了防
  • 如何更改Jquery表单验证插件中“此字段为必填”的内容?

    如何将 Jquery 表单验证插件中的 此字段为必填字段 的一般消息更改为 fi 必须 可以使用以下代码更改消息的颜色 但如何更改内容呢 我想更改所有 此字段为必填 消息 我想将所有 必需 消息更改为 fi 必须 selector vali
  • jquery中的ontouchstart和ontouchend?

    我目前正在对要更改触摸类的每个元素使用以下内容 ontouchstart this addClass select ontouchend this removeClass select 我想知道是否有这样的事情 element touchs
  • 使用 jQuery 和 Bootstrap 可重复使用的下拉菜单

    我正在尝试使用最新的 jQuery 3 6 1 和 Bootstrap 5 2 3 构建可重用的下拉菜单 但事实证明这很困难 我需要使用单击的按钮上指定的数据属性的值动态更新下拉列表的链接 我正在看优秀的solution https sta
  • 为 Flutter Web 应用程序添加 id 或 name 属性或其他标识方式?

    在编写 Flutter Web 应用程序时 我尝试利用基于 Selenium 的 Web UI Testing 框架 遗憾的是 我无法通过 id 或 name 属性识别代表某个 flutter 小部件的 HTML 元素 HTML 文档中不存
  • jQuery 循环淡入淡出两个图像!

    我无法弄清楚如何让简单的淡入淡出循环发挥作用 正如你所见 我对 jQuery 还很陌生 我已经尝试过 但现在需要很长时间才能解决 所以我想我应该寻求一些帮助 我想做的事 我有两个图像 id 为 img1 和 img2 我希望图像 1 淡入
  • 两行标题的填充

    这有点难以解释 如果有人知道更好的标题 请继续更改它 我想在标题后面画一个黑框 我正在使用 h 标签内的跨度来执行此操作 它需要向左和向右一点填充 我的布局是响应式的 因此标题可能会分成两行 div class headline black
  • html5 datalist 仅选择预定义选项

    我正在使用 HTML5datalist允许通过自动完成和过滤功能从大列表中进行选择 但我只想允许从预定义的选项中进行选择 查看小提琴演示http jsfiddle net tharas rrkdu8pk http jsfiddle net
  • AJAX 调用后使用 jquery 刷新 DOM

    我正在做一个新项目http www hotwirerevealed com http www hotwirerevealed com它显示 识别 hotwire com 上的酒店 输入状态和目的地后 我有一个 javascript 函数 它
  • jQuery keydown 和 :not 带输入

    我正在使用一个小脚本 当按下箭头键时 该脚本会触发页面上的下一个 上一个链接 我试图防止用户在我的搜索输入表单中输入时发生这种情况 也许他们的查询拼写错误并希望使用箭头键来修复 这是我正在处理的内容 var j jQuery noConfl
  • 不固定高度的滚动div

    我需要构建一个动态调整大小的滚动 div div 应动态调整大小以适应屏幕 但如果内容不适合屏幕 它应该显示一个滚动条 因此浏览器自己的滚动条永远不需要激活 我可以通过在 div 中放置另一个 div 并使用来让滚动条出现在 div 中ov
  • 同时在不同层中使用多个 CAKeyframeAnimation

    现在有人知道如何使用 CAKeyframeAnimation 同时对多个图层进行动画处理吗 每个层都有自己的 CAKeyframeAnimation 对象 看看下面的代码 我有一个接收对象 创建 CAKeyframeAnimation 并将
  • Zend 框架表单与 jquery

    有人知道如何使用 Zend Form 和 jquery 简单地创建一个表单吗 我想使用 Zend Form 来验证表单 这样我就不必在 JavaScript 和 PHP 中编写表单的双重脚本 谢谢你 伊沃 特罗姆伯特 那里没问题 如果您使用
  • Laravel 4 中的图标链接

    有人可以帮忙重写这个 从 HTML 到 Laravel4 吗 a href index php span i class icon home i span Home a 该页面的路由名称只是 我知道如何在 Laravel 中编写简单的链接
  • 如何在角度4中使用addHTML

    我试图在 Angular 中使用 jspdf 库的 addHTML 函数 并且已经安装了 html2Canvas 但出现错误 这是我的 demo component ts 文件 import Component OnInit ViewChi

随机推荐

  • 是否可以在所有平台上确定性地从 jpeg 文件中读取像素?

    我遇到一个问题 我发现 JPEG 图像中的像素可能会略有不同 具体取决于我用来读取它们的计算机 我主要是一名Python程序员 我更喜欢使用opencv来读取我的图像 但我不反对使用PIL做一些事情或用C读取图像 根据这篇文章JPEG 图像
  • 使用 jQuery 和 Bootstrap 可重复使用的下拉菜单

    我正在尝试使用最新的 jQuery 3 6 1 和 Bootstrap 5 2 3 构建可重用的下拉菜单 但事实证明这很困难 我需要使用单击的按钮上指定的数据属性的值动态更新下拉列表的链接 我正在看优秀的solution https sta
  • OpenMP 运行线程但继续 main

    我正在尝试使用 OpenMP 进行线程处理 因为它是跨平台的 但是我不知道如何使并行后的代码在循环运行时继续运行 它基本上只是并行执行第一个循环 但永远不会执行第二个非并行循环 int main pragma omp parallel wh
  • do.call(rbind, ...) 是否有更高阶的替代品?

    考虑以下数据框A A lt data frame ID c 1 1 1 2 2 2 num c 6 2 8 3 3 1 With A 我想分开ID 然后计算差值num 可以 几乎 获得所需的结果 do call rbind Map func
  • PHP 警告:模块“mcrypt”已加载

    当我使用 PHP 运行命令时 它显示一个错误 例如当我跑步时php v查看我的 PHP 版本 它显示一个错误 然后显示有关 PHP 的信息 模块 mcrypt 已加载到第 0 行的 未知 中 zied ubuntu php v PHP Wa
  • 无法更新firebase版本[重复]

    这个问题在这里已经有答案了 C Users Kashish gt npm install g firebase tools npm WARN optional SKIPPING OPTIONAL DEPENDENCY timed out 4
  • cockplot:调用plot_grid后提取子图

    我在用plot grid安排两个图 library ggplot2 library cowplot d data frame x rnorm 100 y rnorm 100 g sample c a b 100 replace T p1 g
  • 使用两列的 T-SQL“不在其中”

    我想从表 T1 中选择所有记录 其中 A 列和 B 列中的值与表 T2 中的 C 列和 D 列没有匹配的元组 In mysql Where not in 使用两列 https stackoverflow com questions 8435
  • 在 Java 中将 HTML 转换为纯文本

    我需要将 HTML 转换为纯文本 我对格式的唯一要求是在纯文本中保留新行 新行不仅应在以下情况下显示 br 但其他标签 例如 tr tr 也通向一条新线 用于测试的示例 HTML 页面是 http www article kth se li
  • TURN 服务器缺少中继候选者

    刚刚安装了 coturn 服务器 https github com coturn rfc5766 turn server https github com coturn rfc5766 turn server 看起来我只得到了 STUN 候
  • fgetpos/fsetpos 和 ftell/fseek 之间有什么区别

    使用函数有什么区别fgetpos and fsetpos 并使用函数ftell and fseek 获取和设置文件中的位置 什么是fgetpos and fsetpos 有什么好处 为什么要使用它们而不是ftell and fseek 以上
  • 模糊不同值

    我有一个房地产列表数据库 需要返回社区列表 现在我正在使用 mysql DISTINCT 它返回所有不同的值 我的问题是有很多社区具有相似的名称 例如 Park View Sub 1 Park View Park View Sub 2 Pa
  • Chrome 控制台有没有办法在控制台输出中搜索字符串,即使是折叠的字符串?

    我不想只过滤控制台输出 而是还要在其中搜索字符串 显示或折叠 是否可以 CTRL F 无法在折叠的输出中搜索 例如 如果输出是Array 3 它显示为一棵倒塌的树 即使您单击展开以显示有关阵列的详细信息 您也无法在其中进行搜索 The Fi
  • 模板元编程 - 使用 Enum Hack 和 Static Const 之间的区别

    我想知道在使用模板元编程技术时使用 static const 和 enum hack 之间有什么区别 EX 斐波那契通过 TMP template lt int n gt struct TMPFib static const int val
  • Capybara Poltergeist/PhantomJS 测试 - 禁用页面上的 javascript

    我的项目中有一个是 javascript 密集型的 所以我有一个
  • 在 C# 中访问交换电子邮件

    你知道有没有办法吗 我用过这个图书馆 http www codeproject com KB IP NetPopMimeClient aspx 20访问 pop3 服务器 但它不能与 Exchange 服务器一起使用 您是否知道任何其他库或
  • 从Python运行Scrapy

    我正在尝试从 Python 运行 Scrapy 我正在查看这段代码 source http doc scrapy org en 0 16 topics practices html from twisted internet import
  • 当前图像居中的 flexslider

    我正在尝试构建一个 Flexslider 轮播 它有多个图像 但当前图像居中 任一侧的下一个 上一个图像离开屏幕 就像这个网站http www ncad ie http www ncad ie 到目前为止 我已经用一张图片得到了它 http
  • 如何在 Swift 中观察多个节点中 Firebase 子值的变化?

    我的 Firebase 数据库中有一个 用户 节点 其中的每个用户都有一个 root 及其 uid 每个用户的属性之一是 坐标 我想观察所有用户的任何坐标的任何变化 我几乎需要这样的东西 usersDatabaseReference chi
  • iPad html5 视频没有控件?

    这让我苦恼了一整天 但我不知道如何让 html5 视频播放器在没有本机控件的情况下工作 我不想要任何控件 但如果我不包含它们 视频似乎不想播放 即使我在下面添加一些 javascript 试图强制它播放 它也适用于 iPhone 和多个浏览