Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

然后我发现同样的效果适用于浏览器提供的媒体控件UI（通过视频标签上的controls属性）。

是否有任何技术可以将过滤器应用于视频内容而不会影响控件？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: