Question

请在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>

Answer 1

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

唯一完全可靠的方法是拥有单个视频元素，在正常页面流中，正常定位，无覆盖，不通过display属性打开或关闭，不使用{{1}你试图做的财产。

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

如果您想在播放视频之前显示某些内容，则总会有display: none属性，该属性效果很好。但在视频播放AFAIK后无法返回。您可以尝试替换poster属性，可能后跟poster，然后看看有多远，但据我所知，HTML5规范并不要求海报视频播放完第一帧后再次显示。

在iPhone上问题更严重，因为视频只播放全屏，据我所知，即使video.load()元素的尺寸被忽略，也支持默认的矩形尺寸。

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

关于您的具体问题，video做了什么？此外，最终Test()似乎是空的，应该是“按我！”还是那里的东西？

HTML5视频z-index无法在iPad上运行

1 个答案: