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

Question

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

我把它用于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

我解决了这个问题，通过使用您提供的预期样式，通过style将一个JavaScript标记附加到头部。ES6模板文字语法被用来保持事物看起来很干净。在铬中测试过。

​

​

$(`<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，它会自动删除

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