这让我苦恼了一整天,但我不知道如何让 html5 视频播放器在没有本机控件的情况下工作。
我不想要任何控件,但如果我不包含它们,视频似乎不想播放,即使我在下面添加一些 javascript 试图强制它播放,它也适用于 iPhone 和多个浏览器,但 iPad 却没有,这很奇怪,有什么想法吗?
如果有帮助的话,这里有一些标记!
<video src="video.mp4" id="video" poster="image.jpg" onclick="this.play();"/></video>
$('#video').click(function(){
document.getElementById('video').play();
});
iOS 不支持autoplay
视频标签的属性。您似乎也无法使用 jQuery 绑定到视频元素中的单击事件(请参阅fiddle http://jsfiddle.net/LfBmF/2/).
解决方法是在视频元素上放置一个不可见的 div,并将播放视频的点击绑定到该元素(请参阅fiddle http://jsfiddle.net/LfBmF/7/):
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();
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)