Skip to main content

Can I haz appearance:none; for the video element ?

I didn't think this was gonna be so hard to make a video NOT have native controls.

And it's not, at least not for the majority of web developers. You have a nice controls attribute on the video tag. Add it, you have native controls, don't add it and you won't.

The thing is however that many sites for many different reasons specify their own controls using Javascript. And I'd like to continue doing the same for Wikipedia.

And here is my problem pictured above. I call it the 'Flash of Native Controls'. Something like this is extremely distracting for visitors of the webcontent.

The solution seems simple. Just remove that controls attribute from your HTML. But I'd rather not do that.. And the reason is because at Wikipedia, we have many re-users of our generated HTML content. But most of those re-users don't use the same JS stack. Removing the controls attribute means they won't have videocontrols. I want controls, I just want MY controls instead of those of the user-agent.

Many other solutions have been suggested to me, but all have downsides. Messing with the HTML structure (sorry, don't want that), using inline scripts (want that even less), using iframes (nice, but I shouldn't have to) etc etc.

Honestly, I see this as a styling problem. I should be able to specify this using CSS in the head element, so that when the first paint of my HTML content occurs (usually well before the JS starts executing), my video already has no controls. The poster remains in a 'non-interactive' state a bit longer, but in general i'm fine with that. People won't watch a video in the first 300ms, but they will notice all those flashes when I have 50 video players on a site and a 3G connection.

And we used to have this in webkit browsers. Using CSS we could specify something like:
video::-webkit-media-controls { display:none !important; }
However, that is referring to Shadow DOM and those are supposed to be isolated 
And there never was a Firefox/IE version of this to begin with so :(
Image by Jason Z
I figure this really is not much different from type attributes for an input. This is semantic meaning.. It doesn't and shouldn't mean that I want the native controls. And browser vendors have recognized this, because even though it's not part of any standard, they have over the years provided web developers with the appearance CSS property, to give browser developers the option to take over the look of these increasingly specialized input controls.

What I need is an "appearance: none" for the video element really.

So why is this not a standard yet, and why couldn't we use the same property for the video tag ?

Labels:

Comments

Post a Comment

Popular posts from this blog

5 years of Article message boxes

Do you recognize these boxes ? Most likely you do. These are the very recognizable "amboxes", which is a short for " Article message boxes ". They are often visible at the top of articles in English Wikipedia and one of the most recognizable elements of those articles. Today I noticed that these boxes are now just over 5 years (and a month) old. They were first introduced to the general public starting from September 2007 . Their features are in short; a single consistent design, color coded for severity and purpose, dynamic but consistent in width (stackable), IE 5.5 and IE 6.0 compatible and a consistent parameter setup for its content. And that is a big deal, because I still remember what it looked like before when it had none of that. There were dozens of templates with different widths, different colors, different spacing and they all had different parameters. [I've been trying to find an image from back then, but I haven't been able to find one....
1 comment
Read more

Using git svn on El Capitan

I needed to use git svn to do a svn migration, and it was a very painful experience to figure out how to get that working again after I upgraded to El Capitan. It seems that with Apple's system integrity, Apple has broken both ruby and perl setups to some degree, and it's taking a while to catch up with that. Short story: Install homebrew Install ruby from homebrew Install svn using homebrew Install a new version of git using homebrew. Now you still get an error: Can't locate SVN/Core.pm in @INC (you may need to install the SVN::Core module) For this, run the following, to create some symlinks that are required for perl. sudo mkdir /Library/Perl/5.18/auto sudo ln -s /Applications/Xcode.app/Contents/Developer/Library/Perl/5.18/darwin-thread-multi‌-2level/SVN /Library/Perl/5.18/darwin-thread-multi-2level sudo ln -s /Applications/Xcode.app/Contents/Developer/Library/Perl/5.18/darwin-thread-multi‌-2level/auto/SVN /Library/Perl/5.18/auto/ Dear Apple... Reme...
Post a Comment
Read more

Bleeding edge or is it ?

As most people know, Wikipedia usually runs the bleeding edge code of MediaWiki. Currently new versions are deployed every 2 weeks. This is great, necessary and sometimes annoying for Wikipedians. There is a common complaint that MediaWiki treats Wikipedia as it's experimentation grounds. On the other hand MediaWiki is overly focused on Wikipedia. Without Wikipedia, I think that the default MediaWiki would look a lot more like Wikia than like Wikipedia. In my opinion, if MediaWiki treats Wikipedia as it's sandbox then it does so because the only sandbox that compares to Wikipedia is Wikipedia itself. There ARE no other viable experimentation grounds that compare to the distorted reality of Wikipedia. So how bleeding edge is bleeding edge? Code is deployed almost every 2 weeks, yet HTML5 has been the default for MediaWiki for over 3 years now , but has still not made it to Wikipedia for all sorts of compatibility reasons and accommodating to the volunteer tech community...
Post a Comment
Read more