By setting the controls attribute of the video element to false, we are able to hide the controls but for some reason, when entering full-screen mode they reappear, despite being hidden in normal screen mode. (Update: this bug is filed in the Chrome bug tracker).Īfter some inspection in the dev tools, I found that: Like so many others, I searched around for answers to this problem but had no luck finding any. Instead of displaying the custom controls I was working on, native browser controls appeared on the video when it entered the full-screen mode. While working on a custom HTML5 video framework lately, I stumbled upon an issue which a lot of designers and developers stumble upon in this area. The problem of HTML5 video controls in full-screen mode These elements (buttons, sliders, etc.) are part of the DOM, but you can’t actually see them in the main DOM tree, you only see them rendered onto the page. Where did all these control elements come from?īrowsers add these controls as a “sub-tree” of the video tag into the rendering of the document. If you’ve ever worked with HTML5 video then you have probably wondered how you get a bunch of control buttons, sliders, and slider thumbs on your page, when you’ve only added a single tag to the DOM. Digging into the shadow DOM, Sara finds a solution… She was working on some custom HTML5 video controls and noticed that the customizations were lost when the video went into full screen mode ( example of that happening). I know Sara through all her excellent work on CodePen.
The following is a guest post by Sara Soueidan.
0 kommentar(er)
