mp4 Vj 动画视频滞后于高分辨率视频答案

【问题标题】：mp4 Vj Animation video lagging hi res videomp4 Vj 动画视频滞后于高分辨率视频
【发布时间】：2018-04-28 06:27:59
【问题描述】：

我试图让一个视频在我页面左上角的视频标签内播放，它加载正常，分辨率很好，它似乎在循环，但它非常滞后，肯定没有实现60fps 它是 mp4 格式，原始 mp4 的分辨率是 1920x1080 它是一个高分辨率 vj 免费循环，称为 GlassVein，如果你在 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 在页面加载时将元素淡入页面。但是需要注意的是，画布和屏幕外视频标签都必须与原始视频分辨率匹配，否则它会再次开始滞后，但是您可以使用 Css 通过 transform:scale(0.5); 将其缩小。这似乎根本不影响性能。

流畅如黄油，不会丢失任何高分辨率图像。在其上添加了轻微的模糊0.34px 以使其更加平滑。

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

【问题讨论】：

标签： loops animation video ffmpeg mp4

【解决方案1】：

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

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

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

查看示例：https://stackoverflow.com/a/42365034/334402

【讨论】：

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

【解决方案2】：

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

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

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

如果您遇到任何相同的问题或问题，请参阅上述编辑[在问题中]。

【讨论】：