定位HTML5视频播放器控件

Question

我正在与Chrome中的HTML5本机视频播放器一起工作，并且有问题。控件似乎在视频本身下面漂浮，在桌面上可以接受，但在移动设备上可以看到。有什么办法可以将其留在视频框架内？

我真的不知道从哪里开始，因为我找不到任何专门针对控件的方法。

  #movie-player {
  padding: 0.7em;
  margin: 0 auto;
  width: -webkit-calc((100% - 3em) / 1);
  width: calc((100% - 3em) / 1);
  max-width: 600px;
  border: 1px solid #e7e7e7;
}    

        <figure>
                    <video class="fadescript" id="movie-player" width="640" height="360" preload controls>
                        <source src="video/explainervideo.mp4" />
                        <source src="video/explainervideo.ogv" />
                        <source src="video/explainervideo.webm" />
                    </video>
        </figure> 

谢谢

Answer 1

您可以使用Shadow dom对<video>元素的控件进行样式。目前，它的浏览器支持非常有限，但是您说您正在用Chrome进行此操作，并且很高兴地支持Chrome。

Sara Soueidan写了一篇文章，讲述了如何使用Shadow Dom隐藏视频控件。您可以将其用作起点。看来您正在寻找video::-webkit-media-controls和/或其后代的样式。