iPad/iPhone HTML5 视频加载

发布于 2024-09-04 18:31:43 字数 377 浏览 3 评论 0原文

我试图在 iPad/iPhone 上动态加载，并注意到我无法在其上方放置 div。我将覆盖层放在 html 中，以便它在页面加载时生成，而不是通过 javascript 添加，并且视频在创建时绝对位于此元素下方。这适用于 PC，我想知道既然它是通过 js 创建的，iPhone 操作系统是否会覆盖 z-index 并强制到顶部？

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

日裸衫吸 2024-09-11 18:31:43

我找到了一个非常好的解决方法。我使用jquery，所以这是需要记住的一件事。

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

问题：

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

我的解决方法：

var myNav = $("TAG_SELECTOR_HERE");

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

现在我知道我可能缺少一些分号，或者我的编码可能已关闭，但我只是发布以供参考。基本上，当我的菜单被单击或处于活动状态时，我将从所有视频中删除控件属性，然后当菜单停用时，我将恢复控件。

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

谢谢！！

-缺口

I found a pretty nice work-around. I'm using jquery, so that's one thing to keep in mind.

My issue was, I was building a Ipad web-app, with a navigation button at the bottom left (I can't give a link as it's a client project). When the user would click (tap) the button in the lower left, a drop-up menu would animate in, and then you could click the buttons in those menu's to get to deeper sub-menu's.

The problem:

any li tags (or anything for that matter) that was over the video, wouldn't be clickable, so on the pages with video, part of my tap-navigation (the part over the video wouldn't work). Reading posts here actually lead me to my solution, simple, and it may or may not work for your case, but I hope it does.

My workaround:

var myNav = $("TAG_SELECTOR_HERE");

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

Now I know I may be missing some semi-colons, or my coding may be off, but I'm just posting for reference. Basically, when my menu is clicked, or is active, I'm removing the controls attribute from all videos, and then when the menu is deactivated, I'm bringing the controls back.

You could use this method anywhere you like...you could remove the controls after a video ends, after someone hovers over something (assuming that something isn't already over the video), when the mouse is within certain coordinates (may be your only solution in extreme cases) but this should work.

Thanks!!

-Nick

回复收藏 0 原文

属性 2024-09-11 18:31:43

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

回复收藏 0 原文

￡烟消云散 2024-09-11 18:31:43

您可以将图像绝对放置在视频播放器上方。 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 上，它的工作方式可能会有所不同，具体取决于您是否使用 - 在这种情况下，您需要使用 javascript 提供自己的控件或您将无法启动媒体。

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

我认为将媒体分层是不可能的。你也许可以通过交换位置来假装它。

You can position an image absolutely over the video player. Safari on iPhone will render it with a transparant 'play' symbol. I believe something like this may work:

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

And

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

On an iPad it may work differently depending if you use <video controls /> or not - in which case you need to provide your own controls with javascript or you won't be able to start your media.

The 'cannot play' icon is in my experience normally always an indication that the media can't really be played ;-) because of having the wrong mimetype or codec, incorrect src etc. Overriding it would be a case of checking the media load error exceptions with javascript.

Layering media on top of each other is I think impossible. You fake it maybe by switching positions.

回复收藏 0 原文