没有控件的 iPad html5 视频？

Posted 2023-05-08

【中文标题】没有控件的 iPad html5 视频？

【英文标题】：iPad html5 video with NO controls?

【发布时间】：2012-06-07 01:04:34

【问题描述】：

这让我一整天都在想，但我不知道如何让 html5 视频播放器在没有本机控件的情况下工作。

我不想要任何控件，但如果我不包含它们，视频似乎不想播放，即使我在下面添加一些 javascript 试图强制它播放，它也适用于 iPhone 和多个浏览器，但不是 iPad，这很奇怪，知道吗？

如果有帮助，这里有一些标记！

<video src="video.mp4" id="video" poster="image.jpg" onclick="this.play();"/></video>

$('#video').click(function()
   document.getElementById('video').play();
);

【参考方案1】：

ios 不支持视频标签的autoplay 属性。您似乎也无法使用 jQuery 绑定到来自视频元素的点击事件（请参阅fiddle）。

一种解决方法是在视频元素上放置一个不可见的 div，并将播放视频的点击绑定到该元素（参见fiddle）：

HTML：

<div id="video-overlay"></div>
<video id="video"  >
      <source id='mp4'
        src="http://media.w3.org/2010/05/sintel/trailer.mp4"
        type='video/mp4'>
      <source id='webm'
        src="http://media.w3.org/2010/05/sintel/trailer.webm"
        type='video/webm'>
      <source id='ogv'
        src="http://media.w3.org/2010/05/sintel/trailer.ogv"
        type='video/ogg'>
</video>

CSS：

#video  border: 1px solid black; 
#video-overlay  position: absolute; width: 400px; height: 300px; z-index: 999;  

jQuery：

$('#video-overlay').click(function()
   document.getElementById('video').play();
);

【讨论】：

感谢您的明确回复，我会试一试，然后回来;))

【参考方案2】：

按照设计，您不能自动播放视频，但在播放开始后删除控件很简单，我猜这就是您真正想要的效果：

<video id="video" src="video.mp4" poster="image.jpg" preload="auto" onplaying="this.controls=false"/></video>

【讨论】：

我不确定preload="auto" 在 iPad 上是否有任何作用，但它不会造成伤害。

这解决了我的问题！

这对我有用，如果有人使用一些隐藏video标签的视频播放器插件，我什至可以使用jQuery动态添加onplaying属性到标签

【参考方案3】：

我用过这个

<video id="video" controls=“true”   poster="gray30x25.gif"  autoplay onplaying="this.controls=false">

controls=“true” - 让它在 ipad 上运行

autoplay - 使其自动播放，移动设备除外

onplaying="this.controls=false" - 播放时移除控件

它可以在笔记本电脑上自动播放，也可以在 iPad 上运行！ 谢谢多恩

【参考方案4】：

我能做的最好的就是在用户触摸屏幕做任何事情时立即播放视频，甚至向下滚动页面。

function playVideoNow(e)

    document.getElementById('video').play();
    document.removeEventListener('touchstart', playVideoNow);


document.addEventListener('touchstart', playVideoNow, false);

【参考方案5】：

截至目前，iOS 6 在某些设备上支持autoplay 元素。

查看http://www.longtailvideo.com/html5/autoloop/ 以供参考。