用HTML5 video標簽插入視頻,在谷歌瀏覽器上播放視頻時,右下角顯示的下載按鈕怎么去掉


使用H5的video標簽可以直接插入視頻,一般在瀏覽器效果如下圖顯示:

 

但有時在谷歌瀏覽器上顯示,會遇到右下角有下載按鈕。如果項目要求去掉這個下載按鈕,怎么辦呢?如下圖顯示:

 

分析: 經本人測試,是谷歌瀏覽器版本問題(低版本的右下角沒有下載按鈕,比如53.0版本,我的谷歌瀏覽器是53.0版本) 。用同事電腦上的58.0版本測試有下載按鈕

    只測試了53.0和58.0版本,如果你的谷歌瀏覽器版本是54.0-57.0之間,並且也出現了視頻右下角有按鈕的情況都可以使用下面的代碼。

解決方法:使用CSS hack,代碼如下:

video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); 
}

 

參考博客鏈接:https://majing.io/questions/823


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM