首页 文章

没有控件的iPad html5视频？

提问于
浏览 次
22

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

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

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

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

$('#video').click(function(){
   document.getElementById('video').play();
});
jquery ipad html5 video html5-video

5 回答

  • 13

    iOS不支持视频标记的 autoplay 属性 . 看来你也不能使用jQuery绑定视频元素中的click事件（参见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();
});
    回复于
  • 3

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

    <video id="video" src="video.mp4" poster="image.jpg" preload="auto" onplaying="this.controls=false"/></video>
    回复于
  • 5

    我用过这个

    <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上运行！
    谢谢你

    回复于
  • 2

    我能做的最好的事情就是在用户触摸屏幕后立即播放视频，甚至向下滚动页面 .

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

document.addEventListener('touchstart', playVideoNow, false);
    回复于
  • 8

    截至目前，iOS 6在某些设备上支持 autoplay 元素 .

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

    回复于

相关问题