影子DOM通过创建文档片段的形式高效地封装内容&＃xff0c;影子DOM的内容是特殊的文档&＃xff0c;会通过合并到主文档的方式来创建所有被渲染的内容。
实际上一些浏览器已经通过影子DOM的方式来渲染浏览器的插件

到现在了解到了添加到标签的控制栏是浏览器创建的影子DOM的一部分&＃xff0c;以及影子DOM的相关知识&＃xff0c;接下来就会接触到如何隐藏默认的视频控制栏。

隐藏默认的视频控制栏

 现在需要重写影子DOM里控制栏的样式&＃xff0c;然而在常规的CSS选择器不能获取影子DOM的情况下怎么实现呢&＃xff1f;
Dimitri Glazkov的文章指出&＃xff0c;有一个简单的伪属性可以允许影子DOM子树的任意伪元素和子树的元素联系起来。也就是说影子DOM子树中的一些元素可以通过与它们关联的伪元素来获取进而重写它们的样式。
但我们怎么确定我们需要重写样式的的影子DOM元素和哪个伪元素关联呢&＃xff1f;我们或多或少知道像范围输入这样的控件在webkit浏览器中我们可以通过伪元素来重写它的指针样式&＃xff0c;如

::-webkit-slider-thumb


FireFox同样提供了两个伪元素来重写样式

::-moz-range-track


和

::-moz-range-thumb


但其他更加少见的和影子DOM相关联的伪元素呢&＃xff1f;又有什么伪元素和其他的影子DOM元素关联&＃xff1f;Chrome的开发者工具可以帮助我们来找到他们。

确定伪元素和影子DOM元素的关联

 Chrome开发者工具有一个很好的特性就是你可以在Elements选项卡中检查影子DOM子树&＃xff0c;就如同你检查普通的DOM树一样&＃xff0c;所有想要做的东西都可一通过这个特性完美解决&＃xff1a;

1. 进入开发者模式按F1进入设置
2. 在Preferences选项卡中的Elements中把Show user agent shadow DOM前的复选框勾上&＃xff08;并没有找到原文所说的Genral所以按照网上的其他文章重写了这个步骤&＃xff09;
3. 重启开发者工具

现在我们就可以看到下的影子DOM

并不了解为什么开发者会选择这样一个特殊的数值&＃xff0c;可能因为浏览器的开发者使用32位有符号整数来表示z-index值&＃xff0c;而2147483647是最大值&＃xff0c;为了确保自定义控制栏的可见性&＃xff0c;你必须吧z-index值设置大于或等于该值。

.custom-video-controls{z-index:217483647;
}


总结

 为了在全屏模式下隐藏默认的控制栏并显示自定义控制栏&＃xff0c;浏览器提供了影子DOM给开发者使用&＃xff0c;使用步骤如下&＃xff1a;

1.确认影子DOM元素和伪元素的关联关系&＃xff0c;然后将其display属性设置为none。
2.将自定义控制栏的z-index设置为32为有符号整数的最大值保证其可见性

最后可以看一下实现效果DEMO