解决 CHROME FLASH 不能自动播放的问题及加载视频前的“黑色背景”如何改变

      chrome中flash不能自动播放，相信很多人都遇到了这个问题，网上检索的话，很多都会提到添加muted，当时尝试了这个方法，根本不起作用。后来慢慢发现一种情况：当单独在根节点中放入video后，可以自动播放，后来又发现宽度必须要大于一定值，否则还是不行，自己当时尝试到300（300也可以），250就不行了，如果在一个标签里或者一个盒子里嵌套了video，那么这个盒子的宽度也必须大于一定值，太小也不行。

       后来在网上看到一篇文章，这篇文章中作者也发现了这点。在文章中他提到：其实flash视频、flash广告或者flash动画，是很难判断的，所以可以猜chrome并非按照“广告”来禁用，而是尺寸大小，这种随便查看几个网站就知道了，还有上例 DNF官网的下载按钮，这种明显就不是广告。经过一番手动测试，发现了这个被判断为flash广告的临界大小为宽398px，高298px。

      于是解决思路也很简单，就是在页面初始插入flash时将宽高设置为不小于上述的值，并且设置个延迟函数或者在监测到的play函数里进行相应样式的设置来替换为正常大小的flash，测试很顺利，发现初始时设置为上述值后，那么该flash就在后续使用中都不会被禁用播放，如果从DOM节点中删除则依然会被判断为广告flash。

 <div style={{ width: '100%', height: '224px' }} id='bossVideo'>
    <VideoPlayer result={result} width={398} height={300} aspectRatio="4:3" />
</div>

VideoPlayer.tsx中部分代码（我用的是rtmp协议）：

 <div className='includeVideo' style={{ width: '400px', background: 'white', marginTop: '-76px', /* marginLeft: '-40px', */ height: '300px' }}>
        <video
          ref={ref => this.playerRef = ref} style={{
            width: this.props.width,
            height: this.props.height,
            mixBlendMode: 'screen', // 加这个属性是为了设置video背景不为黑色，背景根据他的父盒子的背景来定,但是发现在edge浏览器里不行
          }}
          id="player" className={`video-js`}
        ></video>
      </div>


 that.player.on('play', function (): void {
      console.log("视频播放");
      $('#player').css({ width: '300px' });
      $(".includeVideo").css({ width: '300px', background: 'transparent', marginTop: '-38px', marginLeft: '0' });
      $('#bossVideo').css({ overflow: 'hidden' });
    });

上面的代码中有一句是设置video视频背景色变成透明的（相信很多人会遇到video加载视频前是黑色的情况）:

mixBlendMode: 'screen'，把video的外围盒子的背景设置成什么样就是什么颜色，在视频加载过程中，背景色就是外围盒子的背景色，为了看上去video的高度没有变化，就将外围盒子最初的背景设置为了白色，播放后，改为透明色。