修改video標籤自帶按鈕的默認樣式

原文：https://blog.csdn.net/nicexibeidage/article/details/79637750

這裏所說的修改video標籤中自帶按鈕的默認樣式，指的是用css就能夠控制視頻播放按鈕的大小等

 

咱們來看一下 video 的內部構造：

chrome 下，開發者工具  setting  Preferences  Elements  勾選 "Show user agent shadow DOM"

再回來看，已經能夠看到 video 的內部結構了

瞄一眼，有沒有看到很熟悉的 -webkit-media-controls-fullscreen-button ？

確實如此，其餘的按鈕，包括播放按鈕、播放進度條、靜音按鈕、音量條等，均可以像全屏按鈕同樣自定義樣式。不止是隱藏噢，其餘的樣式一樣適用，好比。。

經過video::-webkit-media-controls-fullscreen-button{ display: none; }或者*::-webkit-media-controls-fullscreen-button{ display: none; }就能控制全屏按鈕的樣式，其餘按鈕是同樣的。

可是，下載按鈕很特別，是獲取不到的，因此沒法控制它的樣式，可是能夠將它隱藏

 

怎麼辦？有兩種方式：

1. controlsList

在 video 上加屬性 controlsList="nodownload"，就能夠隱藏下載按鈕。

就這麼簡單？固然不是。。。這種方式須要 Chrome 58+ 才支持，不能用於生產環境

2. overflow: hidden

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

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

就是將控制條面板設的長一些，超出的隱藏。。。這種方式仍是勉強能夠用於生產環境的，由於沒有別的更好的辦法。。。