H5移动端音视频开发遇到的一些问题小结

Android

1.video和audio不能同时播放

1. 经测试，音视频是不能同时播放的，音频可播放多个，如果有此类qipa需求的建议改掉吧。

2.音视频始终不能自动播放，需触发

3.touchend事件支持不友好，最好用click

2. 在使用swiper的时候，手机滑动效果在安卓上会卡顿。
3. 使用原生js写滑动，安卓依然会存在卡顿或者不起效的情况

4.全屏处理

1. 微信端加上 x5-video-player-type=“h5”，这属性还可隐藏播放控件
2. 加上playsinline

 <div class="videobox" ontouchmove="return false;">
    <video id="myvideo" src="v.mp4" x5-video-player-type="h5" playsinline webkit-playsinline></video>
</div>

5.不支持倍速播放属性playbackRate

6. 不支持canvas画video

context.drawImage(video,0,0,canvas.width,canvas.height)

7. 支持video的MP4和WEBM格式(2.3版本以上)

8. 支持audio的MP3，ACC和wav格式

ios

1.音视频不能自动播放，需要触发事件

1. iOS10后版本的safari和微信禁止了自动播放音频，为用户流量着想~呵呵，所以只能引导用户去触发，监听touchstart事件还是很好用的,一般只执行一次，所以可以呀JQ的one方法

   // 通用做法
   $(document).one('touchstart',function(){
   	$('video')[0].play();
   	$('audio')[0].play();
   });
   // ios微信端 嵌入webview全局的这个事件触发后，视频可自动播放
   document.addEventListener("WeixinJSBridgeReady", function (){ 
       video.play();
       video.pause();// 播放又暂停可以让视频处于加载状态，为后面流畅播放做准备
   }, false)
   

2.浏览器视窗内的全屏处理

1. 加playsinline 属性

   <video id="myvideo" src="v.mp4" playsinline webkit-playsinline></video>
   

3.airplay功能

1. 加上x-webkit-airplay="allow"标签属性

   <video id="myvideo" src="v.mp4" x-webkit-airplay="allow"></video>
   

4.Safari只支持video的MP4格式

4.1. ios端下载的Chrome浏览器是可以支持Ogg，MP4和WebM格式的 

5. 支持audio的mp3,aac,wav和mp4格式

结语

暂且先就这样吧，有新问题时再来更新，此文仅权当做笔记了。