我們這裡說的“修改 video 樣式”并不是要自己實作一套 controls，而是嘗試修改 video 的預設樣式
隐藏全屏按鈕
這個很容易查到
video::-webkit-media-controls-fullscreen-button{ display: none; }
那麼，video::-webkit-media-controls 是什麼？還可以用它來定義哪些元素的樣式，見下文
自定義其它樣式
為什麼用一個 video 标簽就可以播放視訊呢，它内部是怎麼實作的呢？
我們來看一下 video 的内部構造：
chrome 下，開發者工具 -> setting -> Preferences -> Elements -> 勾選 "Show user agent shadow DOM"
再回來看，已經可以看到 video 的内部結構了
瞄一眼，有沒有看到很熟悉的 -webkit-media-controls-fullscreen-button ？
确實如此，其他的按鈕，包括播放按鈕、播放進度條、靜音按鈕、音量條等，都可以像全屏按鈕一樣自定義樣式。不止是隐藏噢，其他的樣式同樣适用，比如。。
下載下傳按鈕
是不是感覺從此 video 盡在掌控，想讓它啥樣就啥樣了？大部分情況下，确實如此。
然而，還有個不聽講的妖孽，就是下載下傳按鈕。嘗試用 video::-internal-media-controls-download-button 定義隐藏，并不生效
怎麼辦？有兩種方式：
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); }
就是将控制條面闆設的長一些，超出的隐藏。。。這種方式還是勉強可以用于生産環境的，因為沒有别的更好的辦法。。。