没有控件的iPad html5视频？

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();
});

5 个解决方案

#1

iOS does not support the autoplay attribute 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不支持视频标记的自动播放属性。看来你也不能使用jQuery绑定视频元素中的click事件（参见小提琴）。

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，并将播放视频的点击绑定到该视频元素（参见小提琴）：

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();
});

#2

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>

#3

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

自动播放 - 使其自动播放除了移动设备

onplaying="this.controls=false" - removes the controls when playing

onplaying =“this.controls = false” - 播放时删除控件

It autoplays on laptop, and works on iPad!
thanks Doin

它在笔记本电脑上自动播放，并在iPad上运行！谢谢你

#4

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

#5

As of now, iOS 6 supports the autoplay element on some devices.

截至目前，iOS 6支持某些设备上的自动播放元素。

Check http://www.longtailvideo.com/html5/autoloop/ for reference.

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

#1