通过jquery更改html视频播放器css

Posted 2023-03-06

【中文标题】通过jquery更改html视频播放器css

【英文标题】：Change html video players css through jquery

【发布时间】：2019-07-10 08:36:57

【问题描述】：

我正在尝试通过 jquery/javascript 隐藏 html 视频播放器中的渐变和时间线。

我让它在 CSS 上工作：

video::-webkit-media-controls-panel 
    background-image: none !important;
    filter: brightness(0);


video::-webkit-media-controls-timeline 
    display: none;

但是 CSS 应该只有在视频有源之后才会出现，所以我想通过 javascript 添加这个 CSS。这允许我添加条件。

我尝试了以下方法，但执行此操作时似乎没有任何变化：

$('video::-webkit-media-controls-panel').css(
    'background-image': 'none !important',
    'filter': 'brightness(0)'
);

$('video::-webkit-media-controls-timeline').css(
    'display': 'none'
);

有谁知道我怎样才能做到这一点？

【问题讨论】：

为什么不把它写在一个全局的.css 或者一个<style></style> 中？

【参考方案1】：

我通过 JavaScript 使用您提供的预期样式将 style 标记附加到头部来解决这个问题。 ES6 模板字面量语法被用来保持东西看起来干净。在 Chrome 中测试。

$(`<style>
    video::-webkit-media-controls-panel,
    video::-webkit-media-controls-timelinedisplay: none; 
    video::-webkit-media-controls-panelbackground-image:none !important    
   </style>`).appendTo('head');

jsFiddle

【参考方案2】：

与 Andy's 的解决方案类似，但可以使用编辑器，例如 Moodle 中的 Atto，它会自动删除

var sty = document.createElement("style");
sty.innerHTML = "video::-webkit-media-controls-panel  background-image: none !important; filter: brightness(0);  video::-webkit-media-controls-timeline  display: none; ";
$("head").append(sty);