Question

我需要在运行时从代码中更改“ video ::-webkit-media-controls-panel”的属性

在某些情况下，我需要将其设置为

  video::-webkit-media-controls-panel
  {
       display: none !important;
       opacity: 0 !important;
  }

和其他情况下，我需要将其设置为（如果选中了代码上的某些复选框）

  video::-webkit-media-controls-panel 
  {
         display: flex !important;
         opacity: 1 !important;
  }

我找不到在运行时从代码中更改它的方法

该怎么做？

Answer 1

我能想到的一个技巧是您可以通过编程方式注入/删除css规则，如下所示。

function injectStyles(rule, id) {
 removeStyle(id);
  var div = $("<div />", {
    html: '<style id="' + id +'">' + rule + '</style>'
  }).appendTo("body");    
}

function removeStyle(id) {
  $('#'+id).remove();
}

$("#change").on("click", function() {
  injectStyles(`video::-webkit-media-controls-panel
  {
       display: none !important;
       opacity: 0 !important;
  }`, 'd');
});

$("#remove").on("click", function() {
  removeStyle('d');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Video Sample Page</title>
  </head>
  <body>
    <h1>Video Sample Page</h1>
    <div id="container">
      <video id='video' controls="controls" preload='none'
        width="600" poster="http://media.w3.org/2010/05/sintel/poster.png">
        <source id='mp4' src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4'/>
        <source id='webm' src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm'/>
        <source id='ogv' src="http://media.w3.org/2010/05/sintel/trailer.ogv" type='video/ogg'/>
        <p>Your user agent does not support the HTML5 Video element.</p>
      </video>
    </div>
  <button id="change">Hide</button>

<button id="remove">Show</button>
  </body>
</html>

如何在运行时从代码更改“ video ::-webkit-media-controls-panel”？

1 个答案: