一、問題

這個(gè)問題其實(shí)一度困擾我很久了，類似小米瀏覽器、魅族瀏覽器等等手機(jī)的默認(rèn)瀏覽器上，video標(biāo)簽的樣式修改會(huì)無效，且一旦播放就會(huì)全屏，層級(jí)提升到最前，并且有不可修改的控制條，對(duì)前端做美化極其的不友好。

在解決這個(gè)問題的路上，嘗試過很多方案，比如轉(zhuǎn)換成mpeg，用canvas渲染，或者修改成序列幀，但是不是畫質(zhì)太低，就是有性能開銷大。也嘗試過使用videojs之類的播放器，但是很可惜 一旦開啟autoplay屬性 就會(huì)被瀏覽器劫持video組件。

在之后，偶然間研究B站的flv.js的時(shí)候，發(fā)現(xiàn)了意外的驚喜，video居然沒有被瀏覽器劫持，之后經(jīng)過仔細(xì)研究，最終得出結(jié)論，如果video的src綁定的是blob對(duì)象，也就是視頻流的話，安卓默認(rèn)瀏覽器因?yàn)檎J(rèn)不出數(shù)據(jù)格式，就不會(huì)劫持video標(biāo)簽的渲染。

在這之后，事情就簡單多了，只需要把需要播放的文件轉(zhuǎn)換成流，喂入video就完事了，不過微信端由于軟件的設(shè)置，必須有交互動(dòng)作才可以播放視頻，這點(diǎn)需要注意。

二、解決

我們項(xiàng)目是vue寫的，原生js或者react理論上同理，部分代碼如下：

希望這篇文章可以幫助苦于部分安卓默認(rèn)瀏覽器兼容的人。