定位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

可以樣式使用暗影的DOM元素<video>的控制。目前它的數量非常有限browser support，但你說你在Chrome中這樣做，並且愉快地支持Chrome。

Sara Soueidan寫道an article about how to use Shadow DOM to hide video controls。你可以用它作爲起點。看起來你正在尋找風格的video::-webkit-media-controls和/或其後代。