loops - mp4 Vj 动画视频滞后于高分辨率视频

Question

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

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

＆它也说 30fps，但我不确定我是否相信这一点，因为它在 vlc 媒体播放器上运行流畅，没有滞后，只是流畅的循环动画

我搜索过:https://trac.ffmpeg.org/wiki/Encode/AAC用于编码信息，但对我来说完全是gobbldygook，我一个字都不懂

我的代码如下；

    <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>

有谁知道为什么这会滞后这么多，或者我能做些什么。
这是一个高质量的动画，我真的不想失去它的分辨率或清晰度。-s 部分最初设置为 1920x1080，因为这是原始文件，但我已经更改它以尝试更快地渲染它...

任何有用的网站、文章或答案都会很棒..

2020 更新

该问题的解决方案是将视频转换为 WebM，然后使用 Javascript 和 Html5 Canvas 元素将视频呈现到页面，而不是使用视频标签嵌入视频。

html

<section id="Theater">
        <video src="Imgs/Vid/PurpGlassVein.webm" type="video/webm"
               width="684" height="auto"
               muted loop autoplay>
               <source>
               <source>
               <source>
        </video>
        <canvas style="filter:opacity(0);"></canvas>
</section><!-- Closing Section for the Header -->

CSS

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

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 在页面加载时将元素淡入页面。但是需要注意的是， Canvas 和屏幕外视频标签都必须与原始视频分辨率匹配，否则它会再次开始滞后，但是您可以使用 Css 通过 transform:scale(0.5); 将其缩小。这似乎根本不影响性能。

像黄油一样流畅运行，并且不会丢失任何高分辨率图像。
添加了轻微的模糊 0.34px也可以让它更加平滑。

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

Answer 1

IP 视频连接将受到网络条件的影响，并且该分辨率下的 60fps 是一个相当高的质量，可以尝试在没有任何延迟或缓冲的情况下保持。

大多数“严肃”的视频服务，包括 YouTube。 NetFlix 等提供多种比特率流，以适应不同的网络条件和不同的设备功能。

客户端可以在逐 block 下载视频 block 时通过视频在流之间切换，以便在请求新 block 时可以为当前网络条件选择可能的最佳分辨率。

示例见此处:https://stackoverflow.com/a/42365034/334402