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格式

結語

暫且先就這樣吧，有新問題時再來更新，此文僅權當做筆記了。