没有控件的iPad html5视频？ [英] iPad html5 video with NO controls?

问题描述

这一整天一直在扼杀我，但我不知道如何让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.

我不想控制什么 - 所以，如果我不包括它们，视频似乎不想播放，即使我在下面添加一些javascript试图强制它播放，它适用于iPhone和多个浏览器，但不是iPad，这是奇怪的，任何想法？

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?

如果它有帮助，这里有一些加价！

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

推荐答案

iOS不支持自动播放视频标记的属性。您似乎也无法使用jQuery绑定视频元素中的click事件（请参阅小提琴） ）。

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

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

A workaround is to position an invisible div over the video element and bind the click which plays the video to that (see fiddle):

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

这篇关于没有控件的iPad html5视频？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！