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

关于ios/iphone/ipad 网页不能自动播放视频、音频的解决方案 mediaPlaybackRequiresUserAction 和 解决iphone/ipad视频播放单独弹出问题webkit-playsinline/allowsInlineMediaPlayback

2015/05/20 00:55
7195人阅读
终于找到解决方案了,这个大家可以试试了~~

<video src="xxxxxx" autoplay preload></video>

这个代码我们很熟悉,就是H5的视频标签,当我们加入autoplay属性后就能播放视频了,而对于video的兼容性可以参考我之前写的文章《HTML5 video视频标签 不能播放MP4的原因》。这个标签真的方便很多虽然有格式限制,但是开发自由多了。不过也有问题,就是之前一直遇到在IPAD,IPHONE下面无法播放问题《iPhone iPad HTML5网页不能自动播放AUDIO音频、VIDEO视频 原因》。


今天在闲逛时候发现了这个代码,还没测试不过查询貌似有效果。而且还有方法可以限制在页面内播放,做过的都知道,ios播放时候,会把页面弹出来,体验很差。而这个时候。。。IOS创建了个新的属性。。

<video id="player" width="480" height="320" webkit-playsinline>

在视频标签加入 webkit-playsinline 就可以解决播放弹出窗口问题,当然还有JS代码的方式,下面来看看JS属性实现的,包含自动播放。

<script>

  if ("wView" in window) {

    window.wView.allowsInlineMediaPlayback = "YES";

    window.wView.mediaPlaybackRequiresUserAction = "NO";

  }

</script>

这个代码就可以实现了,通过上面其实也大概可以看出来,其实是IOS自身的属性功能。。。。

同类推荐

百度地图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 用户整合 免激活 同步登录 解决方法