咱们当官网有时分会要求做视频播放，这时分咱们需要留意一些问题，绝不是咱们想的 放一个video标签 里面加src就能够的

经过我的研究 我发现视频播放器和页面烘托 颜色解析会有误差 比如说你用一个灰色的视频 这时分 rgb比如是220, 220, 220， 可是烘托的时分 这个颜色和你的硬件设备有关系

这个误差用户可能看不出来，可是，假如这是一个布景，视频只是其中一个区域，页面也是灰色 220,220,220.
用户就可能发现，怎样有一个断层。

你在开发的时分可能遇到不了，因为你发现颜色不对就给改了，这时分你设备没问题，可是其他设备就不一定了，比如你用windows开发，等你好好欣赏你的作品，等发布后，老板翻开Mac一看，这什么鬼 一个纯色区域怎样有一个断层，你就收到了一张结业证。

你想这简单啊，你判别mac电脑，就用不同的页面颜色来和视频同步颜色。你又提交给老板，老板翻开手机一看。 ？ 这什么情况，你又收到一个结业恳求。

所以你又判别设备，iOS设备。。。 然后还有安卓， 安卓能够了 发现华为不行， 华为能够了， 发现qq浏览器不行，这时分你觉得你的职业生涯到了尽头。 你想把video标签改成gif，把mp4用网页在线转化改成gif，然后老板一看 这视频怎样变短了，所以你找个专业的人帮你转化，老板一看 怎样加载这么慢（gif压缩算法比video差）

最终 你求规划师小姐姐能不能不要部分视频 给我全视频算了，可是规划是个外国人，你跟她解说了半响，她无法理解你的目的，你心一横，你成功经过出卖自己的身体获得了一个证明自己的机会。

等你拿到全视频改好了，已经是晚上了，可是你觉得值了，今日晚上的月亮格外的亮堂，你模糊能够经过写字楼的落地玻璃看到外面的木棉花和黄花风铃树叶金灿灿得像金子，假如你的人生春暖花开的时分 可能就是这个时分。

修正完成后你拿出手机一看 哎 完美 找老板去了 老板翻开iOS一看，怎样动不了？ 你吓得赶紧去找原因，之前你在windows也遇到过，你经过加muted属性静音就能够自动播放，现在怎样不行了，你开端翻开谷歌找问题，所以你发现 和range有关系，你换一个视频，还是不行，最终看了Video IOS方针 发现能够加playsInline 果然能够，这时分总算完成了，提交。

老板这时分翻开ios一看，果然能够，所以翻开qq浏览器，怎样有一条线？ 再华为翻开 怎样全黑了， 你满脸黑线，你已经错了几次了，你没有机会了，在你的低微祈求下 老板决议再给你一次机会。

你这时分开端认真反思，视频烘托差异，iOS无法播放，qq有奇怪的问题，都是因为video，你下定决心 抛弃video，你郁郁的心情再这时分得到扫空，为什么总要依赖他人的东西，要自己做一个播放器，男子汉大丈夫 生于六合之间 岂能郁郁久居人下 你出去抽了根烟回来 撸起来了袖子 开端思考 怎样做 哦 我如同不会写 所以你翻开了flv.js插件 检查怎样使用

等你写完了，一看 这货如同也是video播放，你傻眼了。 这时你还不死心，比较辞职可能找不到作业，还有房贷需要还，一咬牙，决议自己写，你觉得理论上无非就是恳求然后烘托，恳求能够用axios，烘托能够用canvas，这有什么不能做的，所以你写下了 axios.get … responseType: ‘arraybuffer’ … res … 等下 返回的Arraybuffer你看不懂，你开端百度，开端谷歌，可是没有结果 我们都不会，所以你问chatgpt，他跟你说用video。

你出门抽了一根烟，你开端想起了 你还有很多道友，所以你翻开了微信群，开端说问题，发现没人理你。

你走上了天台 你想不明白 你都干了几年前端了 为什么官网放个视频都做不了 你不能宽恕自己 也不能宽恕我们的冷漠 更宽恕不了那么多浏览器开发商 最最宽恕的不了的是为什么产品要提出这个需求 你怀着悲愤的心情越过了天台 看到扫地阿姨不让你过

你觉得连扫地阿姨都欺压你 你开端哭了 阿姨吓一跳 小伙子 你这是做什么 所以给你安慰 说没什么过不去的坎 她家还有几栋别墅 可是她还是来做保洁了 作业主要是开心 你就把作业的事情说了

阿姨笑着说 这个简单 我以前也是做开发的 说着就放下手中的扫把 解开扣子 把衣服往后一甩 颇有高手风仪得说道 做不了就不做了 你把Video只当一个解析器 然后获取实例 不断获取数据再烘托到canvas上面。

你一想 有道理 这是全能的解法

所以你写下了如下Rect代码

function videoTimerCallback(video: HTMLVideoElement, ctx: CanvasRenderingContext2D, width: number, height: number) {
  if (video.paused || video.ended) {
    return;
  }
  VideoComputeFrame(video, ctx, width, height);
  setTimeout(function () {
    videoTimerCallback(video, ctx, width, height);
  }, 10);
}
function VideoComputeFrame(video: HTMLVideoElement, ctx: CanvasRenderingContext2D, width: number, height: number) {
  ctx.drawImage(video, 0, 0, width, height);
  return;
}
export const VideoCanvasPlay: FC<{ src: string }> = ({ src }) => {
 useEffect(() => {
   setTimeout(() => {
     const video = document.getElementById('video') as HTMLVideoElement | null
     if(video){
       setTimeout(() => {
         video.play()
       }, 0)
       let loop = () => {
         if(!video.readyState){
          setTimeout(() => loop(), 100)
         }
         const width = video.videoWidth
         const height = video.videoHeight
         if(width < 1){
           return
         }
         const canvas = document.getElementById('leftCat-video-canvas') as HTMLCanvasElement | null
         if(canvas){
            const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
            let isRun = false
            const run = () => {
              if(isRun) return
              isRun = true
              canvas.width = width;
              canvas.height = height;
              videoTimerCallback(video as HTMLVideoElement, ctx, width, height);
            }
            run()
            video.addEventListener('play', run, false);
         }
       }
       loop()
     }
   }, 500)
 }, [])
  return (
    <Box sx={{
      position: 'relative',
      '& video': {
        opacity: 0,
      },
    }}>
      <video src={src} id="video" muted  autoPlay loop playsInline />
      <canvas id="leftCat-video-canvas" />
    </Box>
  );
};

用的时分
<VideoCanvasPlay src="https://juejin.im/post/7218554163050332217/xx.mp4" />

哎 完美

最终你继续繁忙其他任务去了 全部都得靠自己 再也不记得楼下陪伴你的的黄花风铃树 也不记得规划小姐姐的柔情 你怀着对技能的执着 开端研究新得计划去了

–完–