Question

当用户重新启用默认浏览器控件时，是否存在HTML5视频（/音频）事件？

目前，我在元素上启用了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可以用于支持的浏览器，是吗？（FF和Opera）。这意味着setInterval并检查其他人v.controls吗？

Answer 1

我不了解你的用户，但我怀疑这种情况发生了很多。因此setInterval可能会增加很少进行的开销。您可以尝试使用相关事件来检查控件，例如mousemove。

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

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

Answer 2

如果您的控件是视频标记之后的直接兄弟姐妹，则可以使用CSS执行此操作：

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

适用于所有支持视频的浏览器。

HTML5视频：重新激活本机控件时隐藏自定义控件

2 个答案: