首页 文章

iPad / iPhone HTML5视频加载

提问于
浏览 次
5

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

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

我的最后一个选择是在页面加载时通过js加载所有视频标签，并将它们分层放在iPad / iPhone上吗？由于iPhone OS将不会加载任何视频，直到请求这将工作？

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

iphone video ipad html5

4 回答

  • 1

    我找到了一个非常好的解决方法 . 我是 using jquery ，所以要记住一件事 .

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

    The problem:

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

    My workaround:

    var myNav = $("TAG_SELECTOR_HERE");

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

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

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

    谢谢！！

    -缺口

    回复于
  • 1

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

    回复于
  • 0

    您可以将图像绝对放在视频播放器上 . 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错误异常 .

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

    回复于
  • 6

    我和iPad视频播放器有同样的问题 . 视觉上，z-index低于对话框的叠加层，但实际上并非如此 . 如果使用javascript替换默认控件，问题就会消失 .

    http://sandbox.solutionsbydesign.com/montage/ipad/

    我使用NetTuts文章制作了自己的HTML5视频播放器

    回复于

相关问题