<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">
网友评论