Chrome瀏覽器video樣式控制-隱藏下載按鈕


Chrome瀏覽器在升級之后 video的樣式和之前是不一樣的,如果使用原生video的話可能會有影響,實際項目中最好使用第三方插件以保證video在所有瀏覽器都有統一的樣式

一、如何隱藏video的下載按鈕

  1. 在Chrome58以上的版本中使用 video元素的  controlsList API :https://googlechrome.github.io/samples/media/controlslist.html   代碼如下:

     <video controls controlsList="nodownload"></video>

  2. 在Chrome58以下的版本中使用css去控制,簡單來說就是將下載按鈕擠出可見范圍,這樣就可以變相的認為按鈕被隱藏了,代碼如下:

video::-webkit-media-controls {
    overflow: hidden !important;
}
video::-webkit-media-controls-enclosure {
    width: calc(100% + 32px);
    margin-left: auto;
}

  

 


免責聲明!

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



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