我们这里说的“修改 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
原文地址：https://www.cnblogs.com/xuan52rock/p/8806580.html