问题
I know you can customize the video controls to make your own buttons/layout, but is there any way I can just make the default controls larger?
回答1:
Not in a cross-browser way, but the controls are built with Shadow DOM elements. In Chrome, at least, you can enable Show Shadow DOM in the dev tools settings, inspect the video player controls, and glean the CSS that you'd need to supply to affect these elements (in webkit browsers).
Sorry, not sure offhand what the support is in other browsers for inspecting and styling Shadow DOM stuff.
回答2:
You can use pseudo-classes, e.g. video::-webkit-media-controls-current-time-display to select control elements.
Here is a codepen sample where you can see some sample styling of the HTML5 video controls: https://codepen.io/BainjaminLafalize/pen/GiJwn
It's for webkit based browsers only - Chrome, Opera and Safari. For Firefox and Edge/IE - styling is not possible at the moment (August 2017).
来源：https://stackoverflow.com/questions/19281487/html5-video-controls-make-larger