微信WebView播放器坑多？那是你沒用WXInlinePlayer！

時間 2019-11-06

標籤微信 webview 播放那是沒用 wxinlineplayer 简体版

原文原文鏈接

先祭出Github：github.com/qiaozi-tech…javascript

0.背景

國內的各個瀏覽器廠商對於Video都有着各類技術上的限制和管控，例如騰訊系的X5引擎對Video進行了大量的魔改，其中包括：html

所謂的同層播放層（？？）
沒法正常playsinline
即便靜音也沒法自動播放
各類播放先後的廣告
純Native組件，沒法很好的進行觸摸事件交互

固然，其餘廠商例如百度/UC/360及手機廠商的默認系統瀏覽器也作了很是多噁心人的奇怪限制。java

1.示例

qiaozi-tech.github.io/WXInlinePla… （視頻25M左右，耐心等待加載一下，畢竟須要FQ）git

2.兼容性

在BrowserStack中測試，主流系統版本均經過，其他機型請考慮經過降級頁面功能進行處理：github

iOS 9+ (含Safari及Safari WebView)
Android 5+（部分4.4.2+的系統瀏覽器也支持）
IE11+
Chrome 24+
Firefox
Safari
Edge 15+

3.優勢

總體核心極小（gzip ~110kb)，減小移動端加載與解析時間
性能進行高度優化，穩定使用在線上產品好惠買中
移動端兼容性良好，不依賴系統/軟件平臺的【魔改】播放器，便於產品實現

4.限制

目前僅支持FLV（AVC+AAC+baseline）格式，若是是MP4等其餘格式請使用ffmpeg進行轉碼shell

ffmpeg -i <your file> -vcodec h264 -acodec aac -profile:v baseline mtv.flv
複製代碼

5. 起步

<html>
    <head></head>
    <body>
        <div id="container"></div>
        <script src="./dist/index.js"></script>
        <script> // 相關特性不支持時須要降級頁面功能 if(WXInlinePlayer && WXInlinePlayer.isSupport()){ WXInlinePlayer.init({ asmUrl: './dist/TinyH264.asm.js', wasmUrl: './dist/TinyH264.wasm.js', }).catch(()=>{ // 部分瀏覽器會在解析wasm/asm時失敗（但相關特性支持） // 此時一樣須要降級頁面功能 }); WXInlinePlayer.ready().then(()=>{ let player = new WXInlinePlayer({ url: './sample.flv', // 僅支持flv格式(H264+AAC) $container: document.getElementById('container'), volume: 1.0, // iOS不容許代碼調節聲量，請注意兼容 muted: false, // iOS和Android均支持代碼控制靜音 autoplay: false, loop: false }); player.on('load:success', ()=>{ player.play(); }); player.on('load:error', ()=>{ console.log('>>>>>>>>>load error'); }); player.on('play', ()=>{ player.volume(0.0); // GET/SET方法 player.mute(true); // GET/SET方法 player.resume(); player.pause(); player.stop(); }); player.on('stop', ()=>{ player.destroy(); player = null; }); // iOS及Chrome高版本禁止聲音播放 // WXInlinePlayer的音畫同步依靠音源的播放時間戳進行對齊 // 當音源播放被阻止時會等待250ms後嘗試直接繪製畫面 // 同時觸發playtimeout player.on('playtimeout', ()=>{ console.log('>>>>>>>>>playtimeout'); }); }); } </script>
    </body>
</html>
複製代碼

6.TODO

流式解析，提升首幀顯示和內存佔用狀況
支持FLV直播流播放
進一步提高H264解析性能

7. 其他問題

如何獲取播放器的當前進度？

因爲須要考慮到playtimeout的問題，所以API不提供相關的支持。一個簡單粗暴的辦法是使用setTimeout本身粗略模擬。固然若是仍然想獲取相關的數據，可使用 player.sound.seek() 方法來獲取，但請作好返回類型的判斷（playtimeout使用此API會返回非Number類型數據）。瀏覽器

爲何在部分低端機器上有音畫不一樣步的狀況

WXInlinePlayer的音畫同步依靠音頻時間戳，瀏覽器目前沒有很是底層的方式控制音頻buffer，同時因爲此實現是CPU軟解H264，低端機CPU性能羸弱，解析一幀H264的時間會比較長（大約30-50ms），而音頻大部分是24ms左右，所以很容易出現音畫不一樣步的狀況。你能夠嘗試下降視頻碼率試一試是否有緩解。ide

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。