我希望视频的背景与容器的背景相匹配。但是，在不同的浏览器中手动设置容器背景会产生不同的结果（显然是由于本地化的硬件加速设置）。

解决方案是读取视频中像素的颜色并相应地更新背景-最初在这里找到---> https://stackoverflow.com/a/44523649/4072697

但是，此方法（包括注释中提出的方法）产生的结果相同（不同浏览器中的颜色不同）

此jsfiddle由于跨来源错误而无法播放视频，但包含以下代码：

HTML：

<div class="container"> 
    <video class="videos" id="test" controls="none" autoplay="" loop name="media"><source src="https://r4---sn-ab5szne7.googlevideo.com/videoplayback?expire=1574210358&amp;ei=1jbUXaubDo_t8gTuhJzwDw&amp;ip=24.103.48.189&amp;id=o-AMlyNgFeuPfxNCz0P6eVhp14foi9XpmwLqDxWO5zEwYA&amp;itag=22&amp;source=youtube&amp;requiressl=yes&amp;mm=31,26&amp;mn=sn-ab5szne7,sn-vgqsknll&amp;ms=au,onr&amp;mv=m&amp;mvi=3&amp;pl=18&amp;initcwndbps=1726250&amp;mime=video/mp4&amp;ratebypass=yes&amp;dur=5.363&amp;lmt=1471775895725173&amp;mt=1574188655&amp;fvip=4&amp;fexp=23842630&amp;c=WEB&amp;sparams=expire,ei,ip,id,itag,source,requiressl,mime,ratebypass,dur,lmt&amp;sig=ALgxI2wwRQIgJuAGaoYOYn6-XQ9ylB8uNwW2rKt09Q2zkixlP-5r4-ACIQCqMpK0BRTwnTzErcNFADAKc7k0YQPjBxJJAQD2vSRR7w==&amp;lsparams=mm,mn,ms,mv,mvi,pl,initcwndbps&amp;lsig=AHylml4wRgIhAOYG1-AAZcBkmaJJI502ztNGkv_9dUhOPNd8kZpJCYLRAiEA9BeuIqWpXG5JMtTFTgDCtmEsoaz0A7zOl6Lku3bj6bQ=" type="video/mp4"></video>
</div>

JS：

      //allow crossOrigin
     var testVid = document.getElementById('test')
     testVid.crossOrigin = "Anonymous";

function drawingLoop() {
      requestId = window.requestAnimationFrame(drawingLoop)
      ctx.drawImage(vid,vidWidth,vidHeight,canvas.width,canvas.height);
  }

  function setVideoBgColor(vid,backgroundElement) {

      var canvas = document.createElement("canvas");
      //size of canvas space to copy pixel onto
      canvas.width = 10;
      canvas.height = 10;

      var ctx = canvas.getcontext("2d");
      ctx.drawImage(vid,10,10);

      var p = ctx.getImageData(0,10).data;

      var colorBoost = 0;
      var colorR = p[0]+colorBoost;
      var colorG = p[1]+colorBoost;
      var colorB = p[1]+colorBoost;
      //colorLayer.data[pixelPos];
      backgroundElement.style.backgroundColor = "rgb(" + colorR+ "," + colorG + "," + colorB + ")";
  }
   document.getElementById('test').addEventListener("play",function(){
        setVideoBgColor(document.getElementById('test'),this.parentElement);
    })

CSS：

.container{
  background-color: yellow;
  width: 100vw;
  height: 100vh;
}
#test{
  margin-top:20%;
  margin-left:15%;
  width:70%;
  height:auto;
}