如何在不影响 HTML5 控件的情况下将 CSS 过滤器应用于视频？答案

【问题标题】：How to apply CSS filter to video without affecting controls in HTML5?如何在不影响 HTML5 控件的情况下将 CSS 过滤器应用于视频？
【发布时间】：2017-09-27 13:04:12
【问题描述】：

如果我对视频元素应用 CSS 过滤器，例如：

  video:first-child {
    filter: brightness(40%);
  }

<video controls></video> vs.
<video controls></video>

然后我发现浏览器提供的媒体控件 UI 也有同样的效果（通过 video 标签上的 controls 属性）。

是否有任何技术可以在不影响控件的情况下将过滤器应用于视频内容？

【问题讨论】：

显示一些标记。您只需将类名或 ID 添加到您希望受 css 影响的元素，并将样式仅应用于该类名或 ID。
由于控件是视频元素的一部分，因此将类或 id 应用于元素不会帮助我更具体地定位过滤器 - 控件仍将获得相同的过滤器效果。跨度>
哦，我明白你在说什么。您是否检查过元素以查看是否可以进一步过滤它？或者您可以在您的视频上添加某种具有静态位置的过滤开发？您需要提供更多内容供我们测试以帮助您，因为您没有显示任何标记或 JS Fiddle 或任何东西。
恐怕在这种情况下您将不得不制作自定义控件。总是有可能工作的剪辑蒙版/路径，但它的大小会因浏览器而异，并且不时...

标签： html css html5-video

【解决方案1】：

不认为这是可能的，但您可以使用 javascript 制作自己的播放/暂停按钮等，然后为视频设置样式？如下：-

(function (window, document, $, undefined) {
    'use strict';

    $(document).ready(function () {
        $('#play').on('click', function(){
            $('.my-video')[0].play();
        });
        $('#stop').on('click', function(){
            $('.my-video')[0].pause();
        });
    });


})(window, document, jQuery);

video {
    border: 10px solid green !important;
    opacity: 0.6;
    box-shadow: 12px 9px 13px rgba(255, 0, 255, 0.75);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<video width="320" height="240" class="my-video">
    <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
    <source src="https://www.w3schools.com/html/movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>
</div>
<button type="button" id="play">Play</button>
<button type="button" id="stop">Stop</button>

【讨论】：