Saturday, May 14, 2016

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 ?

Wednesday, May 4, 2016

El Capitan bluetooth woes

I got a new iMac recently and after transferring my account using Migration Assistant I rebooted the Mac. After this moment, for the life of me I could not get Bluetooth working anymore. In the menubar I had a nice icon with a squiggly line through it.

In the console.app I could find nice informative lines like:

IOBluetoothUSBDFUTool[324]: Could not get IOBluetoothUSBDFU service

I went through tonnes of blogposts and forum posts with all kinds of advice. Mostly coming down to:

  • Unplug all USB devices, shut down and the restart
  • Reset your SMC
None of this really worked. I then started the Mac in Safe mode by keeping the shift key pressed. Now I was able to use Bluetooth. Of course, you can't boot your Mac in Safe mode all the time..... But still this indicates that some 3rd party component was messing up. Possibly a kernel extension, or at least a preference connected to a kernel extension.

I have a few elements installed, but I went with my gut feeling.. Logitech. I own a very nice M500 corded mouse, but the Logitech software has given problems with MacOS upgrades etc before and Googling around indicates I'm not the only one with this experience. I downloaded the installer and reinstalled Logitech (even though I already had the latest version installed). And low and behold. One reboot later things work again...

Not sure if it indeed was Logitech, or that Logitech just triggered a process that kicked the Kernel extension loader in some way to fix my issue, but at least I can use Bluetooth again.