type
status
date
slug
summary
tags
category
icon
password
起因
站点首页视频80M太大，加载过慢就想着怎么来优化一下加载速度
1.视频加载空白处理
给video标签添加
poster属性，作为占位图安装FFmpeg请看我另一篇文章
Windows版 FFmpeg安装可以通过FFmpeg命令行指令进行操作你需要的第一帧图片
video.map是你当前打开命令窗口下的文件
如果第一帧图片不是你想要的那么可以使用下面这个命令
"select=lt(n\,10)" 这个是选择前10帧的照片thumbnail_%02d.jpg 输出 10 张图片,文件名格式为thumbnail_00.jpg thumbnail_01.jpg …2.转换视频为HLS
HLS（.m3u8） 可以根据用户网速提供不同清晰度，避免卡顿
3.使用hls.js播放
安装依赖
使用yarn
使用npm
封装video组件
坑点
我在本地试运行的时候发现一些正常，但我部署到服务器上后就打包错误
这个错误的原因是：
- 打包时
.ts（视频分片文件）被当成 TypeScript 文件
output0.ts其实是 HLS（HTTP Live Streaming）生成的.ts视频片段，但 React 以为它是 TypeScript 代码。
其中我在网上找到的方法是把
.ts 后缀改成.hls.ts 但这样操作以后我发现并不可以，这样打包并没抛出错误了，但是本地和服务器上这个视频都加载异常，原因是因为我使用的vercel默认不会设置.m3u8的MIME类型，需要在next.config.js 加上配置(我使用的Next.js):这样就大功告成了！
