没有控件的iPad html5视频？

Question

这一整天都在扼杀我,但我不知道如何让html5视频播放器在没有原生控件的情况下工作.

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

如果它有帮助,这里有一些标记!

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

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

Answer 1

iOS不支持autoplay视频标记的属性.看来你也不能使用jQuery绑定视频元素中的click事件(参见小提琴).

解决方法是在视频元素上放置一个不可见的div,并将播放视频的点击绑定到该视频(请参阅小提琴):

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:

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

Answer 2

按照设计你不能自动播放视频,但它很简单,在播放开始后删除控件,我猜是你真正想要的效果:

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

Answer 3

我用过这个

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

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

autoplay - 使其自动播放,除了移动

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

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