Video标签黑线问题

Video 标签出现时有时无的黑线，在页面滚动或截屏时消失，停止或回到顶部后又出现。

问题分析：

此问题不是标签和容器大小不符合造成的，经过在几个游览器上的测试，发现在Chrome内核上出现，火狐没有这个问题，这里需要提一点，新版的edg游览器也是使用的Chrome内核，所以edg也存在这个问题，并且你会神奇的发现在我们对它尝试进行截图或录屏的时候它神奇的消失了，操作完后又出现。

问题截图：

解决方法：

给video标签设置mix-blend-mode: darken。简单的解释一下作用，它本质类似于滤镜，元素与下层背景颜色进行混合。

darken：取两层更暗的颜色
multiply：正片叠底，颜色相乘，压暗更强、色彩融合更自然（比 darken 更常用）
color-burn：颜色加深，对比度更强，暗部死黑

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .container {
        width: 100%;
        height: 150vh;
        overflow: hidden; 
        display: flex;
        justify-content: space-around;
      }
      .container video {
        width: 800px;
        height: 800px;
        mix-blend-mode: darken
      }
    </style>
  </head>
  <body>
    <div class="container">
      <video src="https://globalimg.sucai999.com/uploadfile/20211209/267440/132835268627695428.mp4" autoplay muted loop></video>
    </div>
  </body>
</html>