phptext.net PHPText.Net
PHPText.Net > 文章 > 技术 > WEB开发

iPhone iPad HTML5网页不能自动播放AUDIO音频、VIDEO视频 原因

2014/10/24 03:10
5607人阅读
今天参与深入一些的HTML5研究了,结果表明iPhone iPad不支持自动播放网页的音频视频。

HTML5真的很不错,当然限制也多点。最近开始研究播放器的东西,总的来说支持的都还不错,唯独iphone/ipad不能自动播放音频、视频。最初并不了解这个情况,在无数种尝试下,发现apple设备上,就是不能放,必须点击于是就怀疑上了是设备系统问题,经过一番搜索,的确如此,


从搜索的答案中看,apple的设备不单单这是不自动播放问题。还有几个特点:


单一媒体支持

一次只能播放一个媒体,不管你页面上有几个音乐视频,这里说的是媒体。也就是你播放一首以音乐,如果你要播放第二首,那么第一首会被清掉,然后播放第二首,同样视频也受到限制,当你播放音乐那么视频也会停止,播放视频音乐也会停止。这个是一个要记住的重点。


不预先缓存

做过HTML5播放器的都知道,HTML5有播放器有2个属性,autoplay自动播放,preload预先加载。这2个属性在apple设备中是不支持的,即时你设置了,他们也不会对音频、视频进行任何下载行为必须用户出发之后。


延迟加载

apple设备在播放媒体的时候会进行初始化对象,所以相对其他设备会延迟个几秒,而这个延迟会造成对音频的控制等,比如你直接点击播放然后就进行跳动进度这个是会报错的。。。。


上面三点就知道有多蛋痛了,不过换过来思考,其实它也是在为用户考虑,如果你一打开网站就加载10多M的视频,好几M的音乐。流量不就完蛋了。当然这个如果网站要玩你还是有方法的,因为播放是需要互动才能进行。onmousedown、onmouseup、onclick 或 ontouchstart 这几个事件可以用来触发自动播放,当然这个基本相当于自动播放了,手机打开网页,点击任意地方或者拖动都可以出发音频,视频播放。也可以以此来实现自动播放。


这里就记录下原因,详细的后面再发文章讨论!


同类推荐

百度地图WEB API报错:APP Referer校验失败百度地图WEB API报错:APP Referer校验失败
微信支付 官方SDK报错 Fatal error: Uncaught exception ‘WxPayException‘ with message ‘curl出错,错误码:60‘微信支付 官方SDK报错 Fatal error: Uncaught exception ‘WxPayException‘ with message ‘curl出错,错误码:60‘
web app iphone4 iphone5 iphone6 响应式布局 适配代码web app iphone4 iphone5 iphone6 响应式布局 适配代码
关于ios/iphone/ipad 网页不能自动播放视频、音频的解决方案 mediaPlaybackRequiresUserAction  和 解决iphone/ipad视频播放单独弹出问题webkit-playsinline/allowsInlineMediaPlayback关于ios/iphone/ipad 网页不能自动播放视频、音频的解决方案 mediaPlaybackRequiresUserAction 和 解决iphone/ipad视频播放单独弹出问题webkit-playsinline/allowsInlineMediaPlayback
PHP 判断是蜘蛛(搜索引擎)来访PHP 判断是蜘蛛(搜索引擎)来访
PHP版 P2P借贷公式算法函数大全 平息/等额本金/等额本息/先息后本/混合型PHP版 P2P借贷公式算法函数大全 平息/等额本金/等额本息/先息后本/混合型
iPhone iPad HTML5网页不能自动播放AUDIO音频、VIDEO视频 原因iPhone iPad HTML5网页不能自动播放AUDIO音频、VIDEO视频 原因
jQuery获得页面元素(div、table等)页面中的相对位置(position)和绝对位置(offset)jQuery获得页面元素(div、table等)页面中的相对位置(position)和绝对位置(offset)
ECSHOP 订单状态、支付状态、配送状态 相关程序文件、变量、常量 整理说明ECSHOP 订单状态、支付状态、配送状态 相关程序文件、变量、常量 整理说明
Discuz 用户整合 免激活 同步登录 解决方法Discuz 用户整合 免激活 同步登录 解决方法