网页或H5嵌入视频遇到的问题

<div style="background: red">  // 网络不好时不至于不太丑
    <video autoplay loop 
        muted  // 静音才能自动播放
        webkit-playsinline="true" // 兼容 ios 自动播放
        playsinline="true" 
        src="/img/video1.mp4" 
        poster="/img/video1-bg.svg" // 视频画报
    ></video>
</div>

• 视频与背景图片（如果有）不能很好融合，使用box-shadow: 0 0 50px 30px #颜色;

• 视频在不同浏览器、设备间有色差（尤其红色调mp4），使用opacity: 0.98或mix-blend-modecss样式。后者为与父元素的内容、背景如何融合，可以理解为颜色通道，会改变原视频的某些颜色。

• 安卓下视频会在最顶层，目前无法解决，所以安卓禁用视频

最后添加资源预加载，以优化视频加载过慢

<link rel="preload" href="/img/video1.mp4">