我們這里說的“修改 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); }
就是將控制條面板設的長一些，超出的隱藏。。。這種方式還是勉強可以用於生產環境的，因為沒有別的更好的辦法。。。
參考
1. https://googlechrome.github.io/samples/media/controlslist.html HTMLMediaElement controlsList Sample
2. http://www.cnblogs.com/coco1s/p/5711795.html 神秘的 shadow-dom 淺析
3. http://www.cnblogs.com/kevinxue/p/6638733.html h5的video下載按鈕如何隱藏
移動端環境險惡，上線前警惕自測！
from：https://baijiahao.baidu.com/s?id=1577249646248377416&wfr=spider&for=pc