代码之家 › 专栏 › 技术社区 › Yanshof

如何在运行时从代码更改“视频::-webkit媒体控制面板”?

html5-video html5 html

0

Yanshof · 技术社区 · 6 年前

我需要在运行时从代码中更改“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;
  }

我无法在运行时从代码中更改它

怎么做?

1 回复 | 直到 6 年前

1

2

Thaadikkaaran 6 年前

我可以想到的一个技巧是,您可以通过编程方式注入/删除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>