HTML5 视频：重新激活原生控件时隐藏自定义控件答案

【问题标题】：HTML5 video: hide custom controls when native ones are re-activatedHTML5 视频：重新激活原生控件时隐藏自定义控件
【发布时间】：2012-02-12 01:18:38
【问题描述】：

当用户重新启用默认浏览器控件时是否有 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 和歌剧）。这是否意味着setInterval 并检查v.controls 以获取其他人？

【问题讨论】：

标签： html video custom-controls html5-video

【解决方案1】：

如果您的控件是视频标签之后的直接兄弟，您可以使用 CSS：

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

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

【讨论】：

【解决方案2】：

我不了解您的用户，但我怀疑这种情况经常发生。所以 setInterval 可能会增加一些很少做的事情的开销。您可以尝试使用相关事件来检查控件，例如 mousemove。

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

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

【讨论】：