jQuery 没有控件的 iPad html5 视频？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10856209/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iPad html5 video with NO controls?
提问by user1370288
This has been killing me all day, but I am not sure how to get a html5 video player working without the native controls.
这让我一整天都在崩溃，但我不知道如何让 html5 视频播放器在没有本机控件的情况下工作。
I want no controls what-so-ever but if I don't include them, the video does not seem to want to play, even if I add some javascript below trying to force it to play, it works on iPhone and multiple browsers, but not iPad which is strange, any idea?
我不想要任何控件，但如果我不包含它们，视频似乎不想播放，即使我在下面添加了一些 javascript 试图强制它播放，它也适用于 iPhone 和多个浏览器，但不是 iPad 这很奇怪，知道吗？
Here's some markup if it helps!
如果有帮助，这里有一些标记！
<video src="video.mp4" id="video" poster="image.jpg" onclick="this.play();"/></video>
$('#video').click(function(){
document.getElementById('video').play();
});
采纳答案by net.uk.sweet
iOS does not support the autoplayattribute of the video tag. It would also appear that you cannot use jQuery to bind to a click event from the video element (see fiddle).
iOS 不支持autoplayvideo 标签的属性。您似乎也无法使用 jQuery 从视频元素绑定到单击事件（请参阅fiddle）。
A workaround is to position an invisible div over the video element and bind the click which plays the video to that (see fiddle):
一种解决方法是在视频元素上放置一个不可见的 div 并将播放视频的点击绑定到该元素（请参阅fiddle）：
HTML:
HTML：
<div id="video-overlay"></div>
<video id="video" width="400" height="300">
<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:
CSS：
#video { border: 1px solid black; }
#video-overlay { position: absolute; width: 400px; height: 300px; z-index: 999; }
jQuery:
jQuery：
$('#video-overlay').click(function(){
document.getElementById('video').play();
});
回答by Doin
By design you can't autoplay video, but it's simple enough to remove the controls after playback has started, which I'm guessing is the effect you really want:
按照设计，您不能自动播放视频，但在播放开始后删除控件很简单，我猜这就是您真正想要的效果：
<video id="video" src="video.mp4" poster="image.jpg" preload="auto" onplaying="this.controls=false"/></video>
回答by egandesign
I used this
我用过这个
<video id="video" controls=“true” width="300" height="250" poster="gray30x25.gif" autoplay onplaying="this.controls=false">
controls=“true”- makes it work on ipad
controls=“true”- 让它在 ipad 上工作
autoplay- makes it autoplay except mobile
autoplay- 使其自动播放，除了手机
onplaying="this.controls=false"- removes the controls when playing
onplaying="this.controls=false"- 播放时删除控件
It autoplays on laptop, and works on iPad!
thanks Doin
它在笔记本电脑上自动播放，在 iPad 上运行！
感谢 Doin
回答by Purple Tentacle
The best I can do is play the video as soon as the user touches the screen to do anything, even scroll down the page.
我能做的最好的事情就是在用户触摸屏幕执行任何操作时立即播放视频，甚至向下滚动页面。
function playVideoNow(e)
{
document.getElementById('video').play();
document.removeEventListener('touchstart', playVideoNow);
}
document.addEventListener('touchstart', playVideoNow, false);
回答by fseydel
As of now, iOS 6 supports the autoplayelement on some devices.
截至目前，iOS 6autoplay在某些设备上支持该元素。
Check http://www.longtailvideo.com/html5/autoloop/for reference.
