始终显示 Firefox Video 控制栏

Question

我正在尝试找到一些 userChrome.css 以使 Firefox HTML5 视频标签始终显示控制栏：

查看源代码，我发现视频控件是在videocontrols.xml中定义的，CSS文件似乎是videocontrols.css

因此，我在 userChrome.css 中添加了以下内容的变体，但我没有看到对 controlBar 显示有任何影响。

.controlsContainer [hidden="true"],
.controlBar[hidden] {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.controlBar[size="hidden"] {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.controlBar:not([immediate]) {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.controlBar[fadeout] {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

对于为什么这似乎不适用于界面有什么建议吗？

这个问题不是关于 Firefox 的插件，而是关于内置功能。我尝试将样式移至 userContent.css，但在重新启动 Firefox 后也没有效果。还有其他建议吗？

我尝试将红色样式添加到 userChrome.css，将蓝色样式添加到 userContent.css，但在查看 HTML5 视频标签时没有任何迹象：

/* userChrome.css */
#videoControls .controlBar,
.controlBar,
.controlBar * {
    color: red !important;
    background-color: red !important;
    border: 1px solid red !important;
    outline: 1px solid red !important;
}

/* userContent.css */
#videoControls .controlBar,
.controlBar,
.controlBar * {
    color: blue !important;
    background-color: blue !important;
    border: 1px solid blue !important;
    outline: 1px solid blue !important;
}

Answer 1

正如此线程所示，利用

// ==UserScript==
// @name         HTML5 video controls
// @namespace    http://tampermonkey.net/
// @version      0.1
// @include      http://*
// @include      https://*
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  function addVideoControls(videoNode) {
    videoNode.setAttribute("controls", "");
    console.log("*** Enabled HTML 5 video controls for", videoNode);
  }

  for (let el of document.getElementsByTagName("video")) {
    addVideoControls(el);
  }

  const observer = new MutationObserver(mutations => {
    for (let i = 0, mLen = mutations.length; i < mLen; ++i) {
      let mutation = mutations[i];
      if (mutation.type === "childList") {
        for (let j = 0, aLen = mutation.addedNodes.length; j < aLen; ++j) {
          let addedNode = mutation.addedNodes[j];
          if (addedNode.nodeType === 1 && addedNode.tagName === "VIDEO") {
            addVideoControls(addedNode);
          }
        }
      }
    }
  });

  observer.observe(document.body, {childList: true, subtree: true});
})();

通过 Greasemonkey 应该足够了（或通过 Tampermonkey，因为正如 这个 SE 问题 所示，脚本应该是可以互换的）。