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

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应该只有在视频有源的情况下才存在，所以我想通过javascript添加这个CSS。这允许我添加条件。

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

$('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