带有NO控件的iPad html5视频？

这已经让我整天都在想我，但我不确定如何在没有原生控件的情况下让html5视频播放器工作。带有NO控件的iPad html5视频？

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

这里有一些标记，如果有帮助！

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

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

来源

2012-06-01 user1370288

iOS不支持视频标签的autoplay属性。它也会出现，你不能使用jQuery绑定视频元素的点击事件（请参阅fiddle）。

一种解决方法是在视频元件来定位隐形DIV并结合，其播放视频到点击（见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(); 
});

来源

2012-06-01 23:11:46

感谢您的明确回复，我会给这个旋转和回来后;）） – user1370288

工作的魅力。 – user1370288

截至目前，iOS 6的支持在某些设备上的autoplay元件。

查询http://www.longtailvideo.com/html5/autoloop/仅供参考。

来源

2013-09-13 09:04:19 fseydel

在设计上不能自动播放视频，但它足够简单的播放开始后以删除控件，我猜是你真正想要的效果：

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

来源

2014-08-30 19:57:53 Doin

我不确定'preload =“auto”'是否在iPad上做了任何事情，但它没有伤害。 – Doin

这解决了我的问题！ –

这对我有用，我甚至可以使用jQuery动态地将'onplaying' prop添加到标签，如果有人正在使用一些隐藏'video'标签的视频播放器插件 –

我能做的最好的只要用户触摸屏幕进行任何操作，即使向下滚动页面，也会播放视频。

function playVideoNow(e) 
{ 
    document.getElementById('video').play(); 
    document.removeEventListener('touchstart', playVideoNow); 
} 

document.addEventListener('touchstart', playVideoNow, false);

来源

2015-02-26 00:44:11

我用这个

<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" - 删除控制播放

时它自动播放o n笔记本电脑，并在iPad上工作！
谢谢Doin

来源

2016-07-15 00:08:42 egandesign

带有NO控件的iPad html5视频？

回答

相关问题