html 用视频做背景动画 渲染很慢如何优化

Question

vue 项目中 用 video 标签做了视频背景,结果视频有 20 几 M,
导致渲染很慢 体验不理想.请问大佬们有什么优化方式!

Answer 1

服务端需要支持Range请求头，并且视频格式是支持流式播放的，比如Fragmented mp4(fmp4)，这样基本上就可以秒开，不用下载完整视频。

Answer 2

没有很好的办法，也想不到有什么场景一定要这样做。

可以考虑切片，比如分割成 10 个小影片，逐个播放。

Answer 3

刚刚想说分片....就被肉老师答了...
贴一个Node视频切片的视频吧

Answer 4

看了楼上的回答，基本都是以视频流的形式来解决。
视频格式使用hls等视频流形式，就不需要等视频全部加载完才播放了。

不过自己做的话，推流就涉及后端支持了。

如果对画质要求不是很高，可以考虑压缩视频画质，然后把视频文件放到各大云平台去，使用他们的加速服务或者结合CDN加速来尝试减少加载的卡顿。