-1

请解决我在 iPad 上的问题。

我有两个div。一个是视频 div，另一个是按钮 div。当我滚动浏览器视频是按钮 div 的背景。当我开始触摸按钮 div 时，动作没有响应并且动作切换到视频播放或播放等。

我需要做什么 ....

<div style="position:absolute; top:0; left:0;">                     
   <video id="vid" width="480" height="260px" controls style="position: absolute; left: -5px; right: 0; margin: 0 auto; top: 0; display: none;">
      <source src="../activity/video/tusnami.mp4" type="video/mp4"></source>
      <source src="../activity/video/tusnami.webm" type="video/webm"></source>
      <source src="../activity/video/tusnami.ogv" type="video/ogv"></source>
        Your browser does not support the video tag.
   </video>                     
</div>
<div style="position:absolute; top:0; left:0; width: 480px; height: 260px; z-index:10;" onclick="Test()"></div>
4

1 回答 1

2

iOS（Safari 或 iBooks）在页面布局（以及其他问题，例如加载时间）方面对视频非常挑剔。最常见的问题是视频无法显示，经常留下空白区域。

唯一完全可靠的方法是在正常页面流中使用单个视频元素，正常定位，不叠加，不通过display属性打开或关闭，不要z-index像您尝试做的那样使用该属性。

无论其他工作或不工作，如果视频不在前台，则视频将不会播放。iOS 显然有一些逻辑来确定是否是这种情况。它甚至不会开始加载视频。调用video.play()将失败并出现 DOM 错误（要检查这一点，try {video.play();}catch(e){alert(e);}请在适当的位置添加到您的代码中）。因此，至少，在您尝试播放视频之前，您必须更改 z-indexes 以使视频“在顶部”，并更改display: none属性。

如果您想在视频播放之前显示一些内容来代替视频，那么总会有poster一个效果很好的属性。但是在视频播放 AFAIK 后就无法返回。您可以尝试替换poster属性，可能后跟 a video.load()，然后看看这可以让您走多远，但据我所知，HTML5 规范并不要求在视频播放第一帧后再次显示海报。

在 iPhone 上，问题更严重，因为视频只能全屏播放，据我所知，甚至video元素的尺寸都被忽略了，而是使用默认的矩形大小。

您还应该知道，有报道称视频事件处理很有趣。我听说过有关触摸事件未正确传播的故事。

关于您的特定问题，Test()做什么？还有，决赛div好像是空的，应该是“按我吧！” 还是里面的东西？

于 2013-07-18T07:24:03.920 回答