音频视频开发问题总结

移动端音频、视频自动播放

有别于 PC 端，移动端浏览器禁止音频和视频自动播放能力，而当前微信内置浏览器是支持自动播放的。

大部分安卓机给 <audio> 或 <video> 标签设置 auto 属性便可；而其它机型（特别是 IOS 系统），则须要在微信 jssdk 加载完毕并触发 ready 事件后，利用 JS 直接调用音频或视频的 play 方法。

参考 直播视频在微信内自动播放

如何禁止移动端 <video> 标签播放视频时自动全屏

参考视频H5のVideo标签在微信里的坑和技巧

iOS

iOS 10 Safari 中，video 新增了 playsinline 属性，可使视频内联播放。
iOS 10 以前的版本支持 webkit-playsinline

测试发现 iOS 10 以上版本使用 playsinline 达到预期效果，而 iOS 10 以前的版本使用 webkit-playsinline 的达不到预期效果。

推荐使用 iphone-inline-video 解决 iOS 中（包括 iOS 版微信）的兼容问题。

Android

Android 由于由太多厂商定制化，标准很不统一，基本把场景缩小到微信——即兼容QQ浏览器 X5 内核

• 【方案一】

当咱们在微信中播放来至腾讯视频的时候，会发现它竟然不会被强制全屏，而其它来源的视频都不能幸免。因此，咱们能够经过把视频资源上传到腾讯视频再使用。

可是，这个方案有个弊端——播放正片以前，会被强行插入广告。若是不想影响用户体验，能够购买腾讯视频的上传无广告服务，适合有必定经济实力的公司。

腾讯视频VIP会员广告屏蔽特权说明

若想经过腾讯视频上传无广告的做品，属于付费项目，付费标准：3000元/年，每一年能够容许5万视频播放量，若是是5-10万播放量，则年费是6000元，以此类推。若是您有兴趣了解，请把项目需求发送至： v_open@tencent.com，会有专门工做人员主动联系您洽谈具体事项，谢谢！

• 【方案二】 网上流传这一种使用 canvas 实现播放的黑科技，算是一种折中方案，对于没钱又追求完美的小公司能够试试。
• 【方案三】 使用腾讯浏览器 H5 同层播放器

iPhone plus 神秘黑屏——只闻其声，不见其人

设备信息

因为是领导的手机，除了知道是 iPhone 7 plus 外没有更多信息

问题重现

部分移动场景中，<video> 会由于层级过高，没法被其它标签覆盖。最开始的解决的思路——在播放是显示 <video> ，中止时隐藏并显示封面图，可是测试 Iphone7 plus 出现异常。

1. 第一次点击播放时，弹窗播放，一切如常。
2. 而后点击后退按钮暂停播放，此时暂停事件被触发，将 <video> 进行隐藏，显示封面图代替。
3. 第二次点击播放时，弹窗播放，只听到声音，看不见图像，一面黑漆漆的。
4. 重复 2，3 情况依旧。

定位问题

几回调试发现，只要不隐藏 <video> 标签问题就获得解决。那么，暂时时将 <video> 定位到视窗以外便可。

X5 启用同层播放后，触发输入动做，致使部分安卓机型播放时黑屏

http://bbs.mb.qq.com/thread-1...

解决方案

目前来看，要么不启用同层播放，要么不要有输入操做