嵌入的 YouTube 视频无法在 iPad (iOS 7) 上播放,而 HTML5 搜索输入可见

Posted

技术标签:

【中文标题】嵌入的 YouTube 视频无法在 iPad (iOS 7) 上播放,而 HTML5 搜索输入可见【英文标题】:Embedded YouTube videos don't play on iPad (iOS 7) while HTML5 search input is visible 【发布时间】:2013-10-30 17:40:51 【问题描述】:

这是我通过蛮力设法修复的错误,但我不明白为什么该解决方案有效。

问题是嵌入的 YouTube 视频在横向视图中无法在 iPad 上的特定(响应式)网站上运行(在 ios7 中测试)。我设法将其缩小到一个特定的 CSS 规则,当浏览器足够宽时,它会在标题中显示搜索输入,因此它会显示在 iPad 的横向视图中,而不是纵向视图中。

经过一番蛮力摆弄后,我发现从输入标签中删除type="search"(这会导致它回退到默认的type="text")可以解决问题。我的搜索都没有给出解释为什么会这样,甚至没有其他人遇到过同样的事情。

有关该错误的更多详细信息

该网站首先显示一张图片,点击后该图片将通过 javascript 替换为 YouTube iframe。第一次点击后,它会在桌面浏览器上自动播放,在 iPad 上它会加载视频,但在用户再次按下它之前不会播放。

如果type="search" 输入可见(display: block;),则点击嵌入的视频不会使其播放;水龙头不会有明显的反应。如果我放大并点击顶部的控件(例如视频名称),我可以看到它们带有下划线,并且测试表明没有元素覆盖 iframe 和拦截事件。

奇怪的是,点击 iframe 右侧的最边缘会导致视频开始正​​确播放。否则,将 iPad 更改为纵向视图(导致通过 CSS 隐藏搜索输入)将使 iframe 能够被单击以开始播放视频。在第一次点击之后,无论搜索输入是否显示,所有视频控件都会起作用。

【问题讨论】:

他已经清楚地解释了上面的答案-阅读帖子.... 我会将此作为 iOS 错误提交,以便他们可以调查它以防它是错误。 如果没有更多信息或链接,这几乎是不可能“回答”的,但对我来说,这听起来像是一个元素在横向时位于 video 元素上方。因此,点击侧面将允许它开始播放,但中间不会。 Sphvn,如果你仔细阅读这个问题,你会看到我在其中也包含了一个答案,并在此处发布它以防其他人遇到同样的问题。 第二次点击播放按钮后是否播放视频?我在 iOS 7 上遇到了类似的错误:***.com/questions/25731106 【参考方案1】:

我自己刚刚亲身体验了这一点,并想为你写下这篇文章表示敬意。您的 SO 问题,即使没有答案,也为我指明了正确的方向。

就我而言,这与 Youtube 无关。我有一个由 Drupal 在一个大型站点中生成的页面,其中站点范围的搜索机制使用了一个自动完成的 drupal 模块,该模块以 type="search" 作为主要输入的类型。

在 IOS 中,用户报告说 Facebook、Twitter 和 Google Plus 各自的“点赞”按钮都不起作用,页面中嵌入了一个更大的 Angular 应用程序。他们都使用 iframe,但似乎都没有响应点击。

将这个看似无害、无关的输入类型从search 更改为text 立即解决了这个问题。

莫名其妙。

【讨论】:

以上是关于嵌入的 YouTube 视频无法在 iPad (iOS 7) 上播放,而 HTML5 搜索输入可见的主要内容,如果未能解决你的问题,请参考以下文章

如何摆脱嵌入在 UIWebView 中的 youtube 视频周围的白色边框?

Phonegap / Cordova Youtube 在 iOS 上嵌入视频不起作用

嵌入的 youtube 视频无法在某些 Android 设备中播放

Android webview 无法渲染通过 iframe 嵌入的 youtube 视频

Youtube嵌入式视频无法在Chrome上运行

嵌入 iframe 的 Youtube 视频无法在 Android 4.0.3 上播放