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'
});

有谁知道我怎样才能使这项工作？

标签： javascriptjqueryhtmlcss

Answer 1

我style通过 JavaScript 使用您提供的预期样式将标签附加到头部来解决这个问题。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