微信视频与音频应用开发的最佳方案

vfcxcvuj0j

微信视频与音频应用开发的最佳方案


     
        还依稀记得视频在微信h5应用中被引入并一朝爆火的是吴亦凡当兵的应用，后续我们也还开发了不少视频引入爆点的h5，其中360的居多，记得当时动不动就叫上我们的设计总监妹子去摄影棚帮忙看角度选片，其中之后比较火的比如360插线板之老周与神秘女、360老周微博100万换装、还有双十一尖叫等等，在开始的开发过程中也是一路踩坑一路填，算是摸清了双平台下微信中视频和音频的兼容性问题和最佳解决方案，选麻烦的列下。
一、音频
1、坑一：部分安卓机不支持自动播放autoplay。
    原因：这个其实是有些安卓机为用户考虑的一个安全和体验问题，以防止非主动触发下在某些场合自动播放而引起的不必要的尴尬，但你懂得，有些用户就是认为是bug。
    解决方案：给audio加上autoplay，同时为解决兼容，可以在一些图片Loading完后设一个很短如100ms的setTimeout延迟，在计时器里让audio再play一次（设setTimeout的原因主要是把里面的方法加入到队列里）。基本上所有的安卓机都可以自动播放了。

二、视频
1、坑一：视频在部分机型上不能播入，黑屏等。
     原因：全类机型对于视频格式的兼容性不同。
     解决方案：将视频编码转化为H.264格式，这是目前机型兼容最好的编码格式。
2、坑二：不可以全屏播放，出现进度条
    解决方案：给vedio加上x-webkit-airplay=”true”webkit-playsinline=”true”属性，基本上所有的机型都可以自动全屏播放，iphone体验最佳。
3、坑三：视频在非用户主动触发（代码触发）的情况不能自动播放
    原因：和音频不能自动播放类似。确实在这个坑里呆了好久，在发现同一个页面，有些可以自动播放，有些不可以时，终于找到了解决方案。
    解决方案：在页面的任一一个点击事件里让需要自动播放的vedio先play一次，然后马上pause，这样以后非主动触发时，直接play可以正常播放。
4、坑四：视频在主动触发时也不能自动播放
    原因：主要是在主动触发（如点击）后有延迟或动画效果，在延迟完或动画效果结束后播放视频，则不会播放，此坑在Iphone下同样出现
    解决方案：在知道原因后，解决就方便了，去掉延迟或动画效果，一定要的话，也可以在视频前加几帧，等动画效果完了后显示并播放。
5、坑五：视频在某些安卓机里不能被遮盖
    原因：这也是某些安卓机的特意为之，就和pc上视频默认是最上面一样，但pc上好歹（也可能是设计者漏了）可以用iframe盖住视频，但某些手机上目前没有发现任务可元素可以盖住它。-.-
    解决方案：这个没有办法，可能的最佳解决方案只能是截一张视频的最后面画，在视频最后播放完时把视频隐藏，让截图显示，然后再在截图上作文章，当然，如果想在视频播放里盖东西在上面，只能表示同情。

前进不断，踩坑不止，上面这些坑在360双十一的应用遇到比较多，点击阅读原文，看填坑后效果