Question

我试图通过jquery / javascript隐藏HTML视频播放器中的渐变和时间线。

我知道它可以在CSS上工作

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

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

但是，只有在视频具有来源之后，CSS才应该在那里，因此我想添加此CSS槽javascript。这使我可以添加条件。

我已经尝试了以下方法，但是这样做似乎并没有改变：

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

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

有人知道我该怎么做吗？

Answer 1

我通过使用您提供的预期样式通过JavaScript将style标记附加到头部来解决此问题。 ES6模板文字语法用于保持外观整洁。在Chrome中进行了测试。

$(`<style>
    video::-webkit-media-controls-panel,
    video::-webkit-media-controls-timeline{display: none;} 
    video::-webkit-media-controls-panel{background-image:none !important}    
   </style>`).appendTo('head');

jsFiddle

Answer 2

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

通过jQuery更改HTML视频播放器的CSS

2 个答案: