HTML5-видео: скрытие пользовательских элементов управления при повторной активации собственных

Question

Существует ли событие HTML5 video (/ audio), когда пользователь повторно включает элементы управления браузера по умолчанию?

В настоящее время у меня включено свойство controls для элемента, а затем удалите его с помощью javascriptи показать мои пользовательские элементы управления.Но что, если пользователь использует контекстное меню видео и нажимает «Показать элементы управления» для отображения элементов управления браузера по умолчанию.Я хочу иметь возможность соблюдать это и скрывать свои элементы управления в этом случае (возможно, они предпочитают элементы управления, к которым они привыкли).

Есть ли хороший способ переключать мои элементы управления, когда собственные элементы управления переключаются?

(наблюдение за добавлением и удалением атрибута controls не похоже на то, что оно будет работать. Повторное включение их добавляет свойство обратно, но повторное скрытие элементов управления не удаляет свойство. - в chrome16)

---

РЕДАКТИРОВАТЬ : var v = document.getElementsByTagName('video')[0];

со скрытыми элементами управления (изначально и при установке в контекстном меню):

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

С помощью собственных элементов управления, отображаемых в контекстном меню:

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

, поскольку атрибут на самом деле изменяется в элементе, DOMAttrModified может работать для поддерживающих браузеров, да?(Ф.Ф. и Опера).Означает ли это setInterval и проверка v.controls для остальных?

Answer 1

Если ваши элементы управления являются ближайшими родственниками после тега видео, вы можете сделать это с помощью CSS:

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

, который должен работать во всех браузерах, поддерживающих видео.

Answer 2

Я не знаю ваших пользователей, но сомневаюсь, что это часто случается. Так что setInterval может добавить накладные расходы на то, что редко делается. Вы можете попробовать использовать связанное событие для проверки элементов управления, например mousemove.

v.addEventListener("mousemove", function(){
  customControls.style.display = (v.controls) ? 'none' : 'block';
}, false);

// Or New jQuery
$(v).on('mousemove', function(){ ...same... });