在做手機web開發時 手機頁面的video標簽的poster預覽圖在360手機瀏覽器中被視頻所覆寫無法顯示,同時會出現video標簽中視頻只顯示一半另一半黑屏的bug
錯誤復現
由于webstorm內置的tomcat不能在內網訪問(vscode可以啟動專案后訪問),所以作者就直接將出現bug的頁面放置到tomcat的webapps中,讓處以同一網段的手機通過360手機瀏覽器訪問(這里推薦在電腦上將對應的內網ip地址和專案地址合并后通過如草料二維碼等網站生成二維碼后手機直接掃碼訪問).
相應位置的代碼
.mp4 {
height: 7rem;
width: 75%;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
outline: none;
overflow: hidden;
}
<video id="myVideo" poster="static/img/loginbackground.jpg" style="outline: none;width: 100%;object-fit: fill;">
<source src="https://www.cnblogs.com/GoodMemoryBlog/p/static/mp4/arrow.mp4" type="video/mp4"/>
</video>
解決方案
在video視頻標簽上添加
controls360=no // 關閉360內置播放器,防止出現視頻只顯示一半另一半黑屏的bug
preload="none" // 頁面加載后不加載視頻,設定后可顯示poster,猜測360手機瀏覽器在做適配時設定的默認引數不是none
加入后的代碼:
<video id="myVideo" controls360=no preload="none" poster="static/img/loginbackground.jpg" style="outline: none;width: 100%;object-fit: fill;">
<source src="https://www.cnblogs.com/GoodMemoryBlog/p/static/mp4/arrow.mp4" type="video/mp4"/>
</video>
問題解決
最后
十分感謝360手機瀏覽器相關人員的解答,原地址如下:
- 360手機瀏覽器的內置video在部分機型上只能顯示視頻的一部分，并且video的poster會被視頻所覆寫無法顯示
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/258340.html
標籤：Html/Css