html5+video手机样式修改,如何修改 video 样式(示例代码)

我们这里说的“修改 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 ？

确实如此，其他的按钮࿰