Android 上，因為各個軟件使用的瀏覽器渲染引擎不一樣，所以視頻播放的效果差異也很大，這里主要以微信為主。微信使用的是騰訊瀏覽器自帶的X5內核。
而iOS是不允許使用第三方瀏覽器內核的，就是Google Chrome也是用的系統內建的Webkit瀏覽器內核 (就是WebView了)，APP 都是使用的系統自帶的瀏覽器進行頁面渲染,所以IOS的微信瀏覽器是Chrome的webkit內核。
這就導致H5頁面在android和iOS微信中的部分表現差異，但由於X5內核是騰訊基於開源Webkit優化的瀏覽器渲染引擎，所以除了對video標簽的挾持，和下載頁跳轉被騰訊應用寶挾持外，其他表現上還沒有遇到特別折磨人的差別。
1.視頻播放自動全屏問題
這個問題在iOS和安卓下都有，瀏覽器默認全屏播放視頻，解決辦法很簡單，給video加以下屬性就可以解決：
playsinline="true"
webkit-playsinline="true" //webkit內核
x5-playsinline="true" //X5內核
2.音視頻自動播放問題
在最新版的Chrome瀏覽器（以及所有以Chromium為內核的瀏覽器）中，已不再允許自動播放音頻和視頻。就算你為video或audio標簽設置了autoplay屬性也一樣不能自動播放。
<video autoplay></video>
如果用 javascript 代碼顯式調用play方法，控制台會看到如下異常：Uncaught (in promise) DOMException。
這是因為，Chrome只允許用戶主動對網頁進行主動觸發后才可自動播放音頻和視頻。
解決辦法：利用微信提供的js API WeixinJSBridge
var video = document.getElementById("video"); if (window.WeixinJSBridge) { WeixinJSBridge.invoke('getNetworkType', {}, function (e) { video.play(); }, false); } else { document.addEventListener("WeixinJSBridgeReady", function () { WeixinJSBridge.invoke('getNetworkType', {}, function (e) { video.play(); }); }, false); } video.play();
3.android下的視頻同層播放問題
H5頁面分享到微信上播放視頻，最大的坑就是在Android手機上，X5瀏覽器會劫持Video標簽用騰訊播放器彈出全屏播放，處於最上層，覆蓋DOM元素，更可惡的是播放完畢時，會出現很多騰訊的廣告視頻。
其實上面提到的`x5-playsinline`屬性也能一部分解決這個問題，但在自定義視頻樣式等情況下會導致視頻尺寸、樣式等各種各樣的問題，其實騰訊瀏覽器提供了同層播放的解決辦法，文檔請戳：【https://x5.tencent.com/tbs/guide/video.html】
同層播放器的使用方式跟普通的video元素差別不大，只是需要加上兩個X5的自定義屬性：「x5-video-player-type」和「x5-video-player-fullscreen」。
<video src="http://xxx.mp4" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portrait" />
屬性說明：
`x5-video-player-type="h5"` 聲明啟用同層H5播放器
`x5-video-player-fullscreen` 是否全屏播放
`x5-video-orientation` 播放控制橫豎屏， landscape 橫屏, portraint豎屏，默認豎屏（此屬性只在聲明了x5-video-player-type=”h5”情況下生效）
有些情況下可能還會出現視頻全屏播放有黑邊的問題
解決辦法：
`object-fit: cover` 這是一個css3屬性，cover的意思是劇中填滿並裁剪，它有一個特性，保證替換內容尺寸一定大於容器尺寸，並且寬度和高度至少有一個和容器一致，所以這個方法可能會導致視頻內容展示不全。
官方對全屏播放的建議：
1. 監聽resize事件實現自適應視口大小變化，視頻播放時會調整視口大小
```javascript
window.onresize = function(){
video.style.width = window.innerWidth + "px";
video.style.height = window.innerHeight + "px";
}
```
2. 在視頻播放期間的交互，彈框，字幕在視頻視頻區域中，不要在視頻區域外
3. 對於直播類全屏視頻，最好不要在最頂部放交互性元素
4.后台切出自動停止播放音樂
在微信中打開一個自動播放音樂的H5頁面，有一個容易忽略的問題，就是在不退出頁面的情況下，后台切出微信時，頁面的音樂仍在播放，這樣用戶體驗就比較差。試了一下，播放中的視頻在頁面切出時會自動停止播放，音樂則不會，需要手動處理。而在Android中騰訊X5瀏覽器處理的就比較完善了，播放中的音視頻在切出后台時會停止播放並且切回頁面后自動續播。
解決辦法：
HTML5新提供的API：visibilitychange
顧名思義這是一個頁面可見性API，瀏覽器標簽頁被隱藏或顯示的時候會觸發visibilitychange事件，對應的可以通過Document.visibilityState 只讀屬性來獲取當前標簽頁在瀏覽器中的激活狀態：
visible: 頁面內容至少是部分可見。 在實際中，這意味着頁面是非最小化窗口的前景選項卡。
hidden : 頁面內容對用戶不可見。 在實際中，這意味着文檔可以是一個后台標簽，或是最小化窗口的一部分，或是在操作系統鎖屏激活的狀態下。
prerender : 頁面內容正在被預渲染且對用戶是不可見的(被document.hidden當做隱藏). 文檔可能初始狀態為prerender，但絕不會從其它值轉為該值。 注釋：瀏覽器支持是可選的。
unloaded : 頁面正在從內存中卸載。 注釋：瀏覽器支持是可選的。
所以要實現后台切出時停止播放音樂通過監聽visibilitychange事件就能實現啦：
document.addEventListener('visibilitychange', function () {
// 用戶離開了當前頁面
if (document.visibilityState === 'hidden') { //... } // 用戶打開或回到頁面 if (document.visibilityState === 'visible') { //... }
});
//或者
document.addEventListener("visibilitychange", (e) => {
if (e.hidden) {
//...
} else {
//...
}
})