37

我在一个页面上有一个视频元素，它在 Safari 移动版和桌面版都可以正常工作。我有一个工作正常的半透明下拉菜单。问题是，当菜单在视频元素上方时，在桌面 Safari 上我可以看到菜单下的视频（根据需要），而在移动版本上，无论我说什么，视频元素都停留在前景（丑陋）的CSS。有什么解决方法吗？

问题的图像

4

12 回答 12

40

仅当动态创建视频元素时才会出现此问题。如果元素在加载时只是在页面中，则z-index可以正常工作。

您可以通过提供 video 元素来修复动态创建的视频的 z-index -webkit-transform-style: preserve-3d。

是的，它和 IE 上的 haslayout 一样糟糕！

于 2011-02-04T07:25:26.977 回答
10

不幸的是没有。

根据我对 iOS 当前工作方式的经验和理解，这是不可能的。

iPad 上的移动 Safari 为 Quicktime 窗口切了一个洞，该窗口使用内置的硬件加速来播放视频以延长电池寿命。（iPhone 和 iPod Touch 只需在单独的窗口中打开即可达到相同的效果。）

这个窗口不能很好地与页面上的其他 HTML 配合使用。事实上，我还没有找到让移动 Safari 在标签上显示任何内容的方法。我的猜测是，这是因为硬件加速只允许视频缩放和定位，并且一次只能处理一个视频。

于 2010-09-10T17:36:14.717 回答
9

我正在使用 flowplayer 和一个简单的 CSS 下拉菜单并且遇到了同样的问题。

我有下拉菜单，点击时会覆盖部分视频区域。子菜单按预期显示在视频上，但没有发送触摸事件。

我通过结合其他人回答这个问题的一些建议来修复它：我设置了可见性：打开菜单时隐藏和可见性：关闭子菜单时可见，并设置-webkit -transform-style: preserve-3d CSS 属性视频。

这是相关的代码。我省略了菜单栏的 CSS，但它可以满足您的预期 - 产生一个涵盖部分视频的菜单。

菜单和视频 HTML

<div id='nav'>
  <ul>
    ... <!-- bunch of ul/li stuff here for the menu and submenus -->
  </ul>
</div>
<div id='videoplayer'><!-- for flowplayer --></div>

CSS

video {
  -webkit-transform-style: preserve-3d;
}

Javascript

$(document).ready(function(){
  $("#nav li").hover(
    function() {
      $(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(300);
      $("video").css({visibility:"hidden"});
    },
    function(){ 
      $(this).find('ul:first').css({visibility: "hidden"});
      $("video").css({visibility:"visible"});
    }
  );
);
于 2012-02-11T22:33:53.363 回答
5

我设法在 ipad 上的 mobile-safari 中的 html5 视频标签上放置了一个菜单 div。老实说，我没有遇到任何问题，它只是奏效了。可能是因为我使用的是 CSS3 动画和 GPU？您可以尝试使用 hack 将元素添加到 GPU。如果你穿上-webkit-transform: translateZ(0);元素，它应该强制它使用 GPU ......

于 2010-09-20T09:57:28.700 回答
2

当您想要<video>在 Safari 中显示一个元素时，您需要在该元素中设置一个transform: translateZ(1px)或更多像素，因为 Safari 为您的元素设置了 Z 轴 ( )<video>的 0 值。transform: translateZ(0)

这是唯一对我有用的东西。不z-index，不transform-style:preserve-3d。

于 2020-12-18T11:50:48.293 回答
1

-webkit-transform-style:preserve-3d并-webkit-transform:translateZ(0)没有为我工作。

将 Flowplayer 与 ipad 插件和控制栏插件一起使用，我可以删除 ipad 创建的控制栏，并将其替换为可以在我的模态窗口下方进行 z 索引的东西。

于 2011-08-25T02:53:47.367 回答
1

我也遇到了这个。我唯一可以为我工作的就是添加

display:none

在视频标签上显示需要点击的 div 时。

于 2011-12-15T18:40:08.233 回答
1

您可以通过提供 video 元素来修复z-index动态创建的视频-webkit-transform-style: preserve-3d。

这对我来说适用于动态创建的视频元素。我还设置了可能也有帮助z-index的覆盖 div 。z-index: 888;

于 2013-01-23T22:02:04.033 回答
0

我遇到了这个问题，它发生在带有非画布菜单的移动设备上。当菜单结束视频时，您无法点击任何菜单项。

我修复了我在菜单打开时将视频移动到其他地方的问题，方法是将其绝对定位在 -100000 像素，当菜单未显示时，它会将其设置为相对定位。

我发现使用 display none 不起作用，因为当您将其设置为再次阻止时，视频将不起作用。

我还尝试将高度设置为 0 - 这不起作用，因为即使您看不到视频，视频似乎仍会占用空间。

最终的方法看起来有点极端，但在使用时并不明显。

于 2013-11-21T09:43:45.993 回答
0

这是适用于 iPad 和 iPhone 的代码。我尝试删除控件然后再次添加它们，但这仅适用于 iPad 而不是 iPhone。删除不透明度然后再次添加后，它也可以在 iPhone 上使用。

$("#overlay_open").click(function(){
  $("video").prop("controls", false);
  $("video").css("opacity", 0);
});

$("#overlay_close").click(function(){
  $("video").prop("controls", true);
  $("video").css("opacity", 1);
});
于 2014-04-24T10:40:44.860 回答
0

今天刚遇到这个问题，不得不从多个答案中拼凑出一个解决方案，因为没有一个能完全解决这个问题......

我在折叠的“表格视图”样式列表中有视频元素，当尝试点击其他列表项时，这些元素在 iPhone 上捕获触摸事件。在 iPhone 上，当点击恰好占据屏幕同一位置的其他折叠元素时，视频会播放。

解决此问题需要以下所有条件：

1）使用这个：

video{
    -webkit-transform-style: preserve-3d;
  }

......似乎没有任何效果，但我还是把它留下了。现在一切正常，所以我不想再搞砸了:)

2）单独切换 visibility: hidden不起作用，并且display:none没有按预期工作。

3) 除了“可见性”之外，controls还必须动态添加/删除 HTML5 视频标签属性。任何一个：

$("video").css({visibility:"hidden"}).removeAttr("controls");或者$("video").css({visibility:"visible"}).attr("controls", "controls");

4) 必须根据初始浏览器/屏幕大小设置文档加载的可见性/控件

5) 虽然主要关注的是 iPhone 的错误行为，但我还必须考虑响应窗口大小的变化，超过我的最小媒体查询断点 600 像素 - 否则视频会在错误的屏幕尺寸出现/消失。

$(window).resize(function(){
    if ($(window).width() > 600){
        $("video").css({visibility:"visible"}).attr("controls", "controls");
    }
});

解决本质上是一个愚蠢的移动 Safari 错误非常痛苦……我当然希望以后测试时它可以在 iPad 上运行……

于 2014-08-16T00:35:44.207 回答
0

对于仍然遇到此问题的任何人，最终对我有用的另一个修复是更改嵌入代码中的选项以不允许控件、建议的视频以及视频标题和播放器选项。我添加了一个简单的Modernizr.MQ查询来更改平板电脑和移动设备的 src，并将以下内容包含到移动设备的 iframe src 中：

?rel=0&controls=0&showinfo=0

我从来没有完全弄清楚为什么会这样，但我猜这些控件有一些用户代理风格，这给了它们一个高 z-index 并使元素位于一切之上。

于 2015-08-28T18:02:53.577 回答