Loops mp4 Vj动画视频高分辨率视频

我试图在页面左上角的视频标签中播放一段视频，它加载正常，分辨率很好，似乎在循环，但它非常滞后，最终没有达到60fps。它是mp4格式，原始mp4上的分辨率为1920x1080。它是一个高分辨率的无vj循环，称为GlassVein，如果你在youtube上搜索，你可以看到它。在右键单击属性时，它会显示以下信息：

比特率：127kbs 数据速率：11270kbps 总比特率：11398kbs 音频采样率为：44khz 文件类型为：VLC媒体文件（.mp4） （但我不想要或不需要音频）

&它还显示了30fps，但我不确定我是否相信这一点，因为它在vlc媒体播放器上运行时非常平滑，没有延迟，只是平滑循环动画

我一直在搜索：寻找编码信息，但对我来说，这完全是胡说八道，我一个字也听不懂它在说什么

我的代码如下：

    <video src="GlassVeinColorful.mp4" autoplay="1" preload="auto"
      -movflags class="Vid" width="640" height="360" loop="1" viewport=""
      faststart mpeg4 -s 320x240 -r 1080 -b 128k>  
    </video>

Javascript

    const Canv = document.querySelector("canvas");
    const Video = document.querySelector("video");
    const Ctx = Canv.getContext("2d");

    Video.addEventListener('play',()=>{
      function step() {
        Ctx.drawImage(Video, 0, 0, Canv.width, Canv.height)
        requestAnimationFrame(step)
      }
      requestAnimationFrame(step);
    })

    Canv.animate({
        filter: ['opacity(0) blur(5.28px)','opacity(1) blur(8.20px)']
    },{
        duration: 7288,
        fill: 'forwards',
        easing: 'ease-in',
        iterations: 1,
        delay: 728
    })

我还使用了Vanilla Javascript.animate（）API在页面加载时将元素淡入页面。但有一个警告是，画布和屏幕外视频标记必须与原始视频分辨率匹配，否则它会再次开始延迟，但是您可以使用Css通过transform:scale（0.5）将其缩小；这似乎根本不会影响性能

运行平稳如黄油，不会丢失任何高分辨率图像。 添加了一个轻微的模糊

0.34px

，使其更加平滑

---

可能仍然可以使用ffmpeg来获得更好的[更小的文件大小]WebM输出文件，但这是我以后必须研究的问题。

IP视频连接将受到网络条件的影响，在该分辨率下的60fps是一种非常高的质量，需要在没有任何延迟或缓冲的情况下进行维护

最“严肃”的视频服务，包括YouTube。NetFlix etc提供多个比特率流，以允许不同的网络条件和不同的设备功能

客户端可以通过视频在流之间切换，一块一块地下载视频，以便在请求新块时根据当前网络条件选择最佳分辨率

---

请参见这里的示例：

我最近又回到了这个项目， 然后回顾代码

发现将视频转换为WebM &使用HTMLCanvas元素显示Vj循环 性能提高了10倍，我会上传代码，以便在我能找到数据时将数据写入画布，我的项目文件夹有点凌乱，没有组织

不过，主要的想法是，在屏幕外创建一个无显示画布，然后将数据读入屏幕上显示的另一个画布。 似乎已经解决了我面临的问题

---

如果您面临任何相同的问题，请参见[问题中]的上述编辑。

我对这个答案有点困惑，因为视频文件目前与html、css、php和javascript一起在我的硬盘上，所以我认为我的连接速度与此无关，你能详细说明或提供参考/网站或文章，帮助我更好地理解我将谷歌或youtube“IP视频”，看看我是否能找到任何东西，好的-我不知道视频在你的本地驱动器上。上面的答案与通过IP网络传输高带宽视频有关，因此，如果你说到这一点，可能仍然是相关的。你能分享一个链接到你的视频或一些视频也有同样的问题，我会看看。根据此更新的描述，可能是您的平台上的硬件不支持正在使用的编解码器，而软件编解码器只是发现很难有足够的马力跟上。感谢您的回复，当我将其设置为上线时，这仍然是方便的信息。视频的链接是&被Beeple称为GlassVein，它是一个Vj循环，可以免费下载。我说的“硬件和软件”是指硬件和软件，对吗。我有一台相当粗糙的笔记本电脑，所以这可能也是个问题。FFmpeg在浏览器中实际工作吗？据我所知，它通常是一个cmd工具？

video{
   display:none !important;
   visibility:hidden;
}

    const Canv = document.querySelector("canvas");
    const Video = document.querySelector("video");
    const Ctx = Canv.getContext("2d");

    Video.addEventListener('play',()=>{
      function step() {
        Ctx.drawImage(Video, 0, 0, Canv.width, Canv.height)
        requestAnimationFrame(step)
      }
      requestAnimationFrame(step);
    })

    Canv.animate({
        filter: ['opacity(0) blur(5.28px)','opacity(1) blur(8.20px)']
    },{
        duration: 7288,
        fill: 'forwards',
        easing: 'ease-in',
        iterations: 1,
        delay: 728
    })