HTML5 video: hide user controls when native are reactivated

Question

Is there an HTML5 video (/ audio) event when a user re-activates the default browser controls?

I currently have the controls property enabled in the element, then remove it with javascript and show my user controls. But what if the user uses the video context menu and clicks the Show Controls button to display the default browser controls. I want to be able to honor this and hide my controls in this case (maybe they prefer the controls they are used to).

Is there a good way to switch my controls when custom controls are configured?

(looking at the controls attribute, which is added and removed, it looks like it will not work. Re-enabling them adds the property back, but hiding the controls does not delete the property again. - in chrome16)

---

EDIT : var v = document.getElementsByTagName('video')[0];

Using hidden controls (initially and when configured via the context menu):

 v.getAttribute('controls') // null v.controls // false 

Using your own controls displayed by the context menu:

 v.getAttribute('controls') // '' in Chrome, "true" in FF9 (string) v.controls // true 

since the attribute actually changes on the element, DOMAttrModified can work for supporting browsers, right? (FF and Opera). Will this mean setInterval and v.controls check for the rest?

Answer 1

I do not know your users, but I doubt that this happens very often. Therefore, setInterval can add overhead for something that is rarely done. You can try using a related event to validate controls like mousemove.

 v.addEventListener("mousemove", function(){ customControls.style.display = (v.controls) ? 'none' : 'block'; }, false); // Or New jQuery $(v).on('mousemove', function(){ ...same... }); 

Answer 2

If your controls are immediate siblings after your video tag, you can do this with CSS:

 video[controls] + #controls.custom { display: none; } 

which should work in all browsers that support video.