Question

我正试图在iPad / iPhone上动态加载，并注意到我不能在此之上放置div。我将叠加层放在html中，以便它在页面加载时生成，而不是通过javascript添加，而视频在创建时绝对位于此元素下方。这可以在PC上运行，我想知道，如果它是通过js创建的，那么iPhone OS会覆盖z-index并强制到顶部？

还有一种方法可以覆盖默认的“无法播放图标”，带斜杠的那个，并显示加载动画吗？这将通过另一条路线解决我的问题。

我的最后一个选择是在页面加载时通过js加载所有视频标签，并让它们在iPad / iPhone上彼此叠加？由于iPhone操作系统在请求之前不会加载任何视频吗？

我也遇到了iPhone的问题，并显示了在视频标签上设置的“海报”属性。

Answer 1

我发现了一个非常好的解决方法。我使用jquery ，所以要记住这一点。

我的问题是，我正在构建一个Ipad网络应用程序，左下角有一个导航按钮（我无法提供链接，因为它是一个客户端项目）。当用户点击（点击）左下方的按钮时，会弹出一个下拉菜单，然后您可以单击这些菜单中的按钮以进入更深入的子菜单。

问题：

视频上方的任何li标签（或其他任何内容）都不会被点击，因此在带有视频的页面上，我的点击导航的一部分（视频上的部分无效）。在这里阅读帖子实际上引导我到我的解决方案，简单，它可能或可能不适用于你的情况，但我希望它。

我的解决方法：

var myNav = $("TAG_SELECTOR_HERE");

myNav.toggle(function(){
   var videos = $("video");
   videos.removeAttr("controls");
},
function(){
   var videos = $("video");
   videos.attr("controls","true");
})

现在我知道我可能会遗漏一些分号，或者我的编码可能会关闭，但我只是张贴供参考。基本上，当我单击我的菜单或处于活动状态时，我将从所有视频中删除控件属性，然后当菜单被取消激活时，我将控件返回。

您可以在任何您喜欢的地方使用此方法...您可以在视频结束后移除控件，有人将鼠标悬停在某物上（假设某些内容尚未在视频上方），当鼠标位于某些坐标内时（可能是你在极端情况下唯一的解决方案）但这应该有用。

谢谢！

-Nick

Answer 2

iPhone不支持海报...直到os4

Answer 3

您可以将图像完全放在视频播放器上。 iPhone上的Safari将使用透明的“播放”符号进行渲染。我相信这样的事情可能有用：

<style type="text/css">
div.player
{
    position: relative;
    margin: 0;
    padding: 0;
}

div.player > img.preview
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    cursor: pointer;
}
</style>

和

<div class="player">
  <img class="preview" src="zk/grumpies.png" width="320" height="240" alt="click to play" title="click to play">
  <video width="320" height="240" controls="controls">
    <source type="video/mp4" src="mah/mahnamahna.m3u8" width="320" height="240" /> 
  </video>
</div>

在iPad上，它可能会有所不同，具体取决于您是否使用<video controls /> - 在这种情况下，您需要使用javascript提供自己的控件，否则您将无法启动媒体。

根据我的经验，“无法播放”图标通常总是表示媒体无法真正播放;-)因为有错误的mimetype或编解码器，不正确的src等等。覆盖它将是一个检查的情况使用javascript加载媒体错误异常。

将媒体叠加在一起是我认为不可能的。你可以通过转换位置来伪造它。

iPad / iPhone HTML5视频加载

4 个答案: