【问题标题】:Background video - What is the best Frame size / Frame rate / Codec / File size?背景视频 - 最佳帧大小/帧速率/编解码器/文件大小是多少?
【发布时间】:2021-11-05 08:23:40
【问题描述】:

拜托,我需要你的帮助。 我正在处理我们主页的背景视频。这部分有 100vh 并且是全宽的。我正在使用 DIVI 作为构建器。

我们聘请了专业的摄像师为我们录制视频。现在他问我理想应该是什么:

  • 帧大小

  • 帧率

  • 编解码器

  • 文件大小

我做了一些研究,似乎理想是:

  • 帧大小:1280 x 720

  • 帧率:30FPS

  • 编解码器:我不知道

  • 文件大小:越小越好

请问,有人对背景视频有任何经验吗?我很迷茫。

另外,您会将其上传到 WordPress 媒体库还是使用 Vimeo/YouTube?我认为您不能将 YouTube 用作背景视频,对吗?

非常感谢!

【问题讨论】:

    标签: wordpress video frame-rate divi frame-size


    【解决方案1】:

    帧大小: 1280 x 720 (=720p) 表示高清画质,相当不错,但取决于你,你认为什么画质可以接受。背景视频通常使用 1920 x 1080 像素(=1080p,全高清),例如我的主要背景视频源是https://coverr.co/,您可以在其中下载免费视频,专门为背景视频而制作。那些是 1920 x 1080 大。我想说,如果您可以要求多个文件,请同时要求 720p 和 1080p 质量,以便做出正确的决定。

    文件大小与此相关,因此您将使用的帧大小越小,您获得的文件大小就越小。

    帧率: 你可以看看这张图片: https://miro.medium.com/max/1300/1*uMlkXIMNF4VIZoi85NZ3aQ.png 看看是什么意思。

    蓝光、DVD 和电影院的电影使用 24 FPS,所以这对您来说也应该足够了。同样,较低的 FPS 意味着较小的文件大小。

    编解码器: h264

    我是 WordPress 插件开发人员,当我们的用户不知道如何创建在所有浏览器上播放的视频时,我们总是建议这样做。到目前为止,它对每个人都很有效。

    YouTube 与 Vimeo 与 MP4: 默认情况下,您不能将 Youtube 视频作为背景。有一些编码技巧,可能有用,但我不建议这样做。

    Vimeo 仅允许 Pro Vimeo 用户使用背景视频。

    使用 mp4 很简单,而且在移动设备和平板设备上效果更好。当网站上启动 Vimeo 或 Youtube 视频时,某些设备会自动打开其 Vimeo/Youtube 应用程序。这很糟糕,您的页面最终会没有背景。

    您还应该注意,如果您在 html 代码中将视频静音,大多数浏览器(即使在桌面上)只允许您自动播放视频: https://www.w3schools.com/tags/att_video_muted.asp

    【讨论】:

    • 您好,非常感谢您的详细帮助!完全得到你关于大小、速率和编解码器的观点。关于 YouTube Vimeo MP4 - 你认为 Pro Vimeo 是理想的吗?我们的视频将隐藏在手机和平​​板电脑上 - 抱歉忘记提及了。在我看来,Vimeo Pro 是最好的解决方案。
    • 这取决于视频的大小和服务器的速度。例如,通过 CDN 服务器,您可以非常快速地提供 mp4 文件,因此购买 Vimeo Pro 帐户并不会产生如此大的不同。但是如果你觉得视频很慢,Vimeo 应该更快。然后您需要这样的代码:stackoverflow.com/a/37309881/2160907,Pro 帐户将为您提供删除控件的选项。首先,我建议您尝试 mp4 html 视频,看看您的页面会多快。
    • 好的,非常感谢,事实上,我刚刚找到了一个解决方案,如何上传带有隐藏控件和任何 youtube 相关设置的背景 YouTube 视频。我将不显示任何控件 + 添加指针事件:无;以防止任何设置出现在悬停时。然后我可以上传背景 YouTube 视频并添加一些负边距以隐藏视频播放之前出现的控件。谢谢大家!
    【解决方案2】:

    @Gabor 说了什么。

    • 1080p (1920 x 1080) 是适合桌面的良好分辨率。
    • 如果您的用户使用的是 移动 或其他小型设备,那么最好选择 720p (1280x720) 甚至 360p (360x640)。这些将节省数据下载并适合较小的设备。寻找提供适当大小视频的插件。每种分辨率都需要一个视频文件。
    • 或者不在用户的移动设备上显示背景视频。
    • 在您的设计中考虑纵向模式会发生什么。您可能想剪掉视频素材的左右两侧,使中间部分充满屏幕。所以,动作应该在中心。
    • 这个视频很大吗?它会播放几分钟吗?如果没有,您绝对应该将其托管在您自己的网站上。如果您不需要,为什么要参与并支付某些第三方媒体服务?如果它真的很大(> 10MiB 左右),您可能应该问另一个问题并提供更多详细信息。
    • 在您的背景视频文件中放置无音轨。浏览器会限制背景视频中音频的播放,因此无需使用无法播放的音轨来使文件变胖。 (如果您有音频,请考虑托管一个单独的文件,以发送点击视频的用户观看;大多数用户不会。)
    • 使用 .mp4 文件,其中包含 H.264 视频(每个分辨率一个文件)。其他东西,例如带有 vp8 视频的 webm,可能会生成更小的文件大小。但它们在浏览器的品牌和型号中并不多(我在看着你,Apple Safari。)
    • 按照 H.264 的说法,视频应以所谓的 Constrained Baseline Profile 编码。它在移动设备上播放时可以节省电量,并且在速度较慢的设备上效果更好。
    • 请您的摄像师为您提供流式传输 mp4 文件(也称为分段 mp4):下载第一帧后即可开始播放。
    • 向您的摄像师咨询有关文件比特率的建议。您的 1080p 文件应该以 1 兆位/秒(每兆字节 8 秒)为目标,以可变比特率编码看起来不错。您的低分辨率文件将需要较小的比特率:毕竟这就是它们的重点。但是,您的比特率可能会有所不同。动作/冒险电影比有声电影需要更高的比特率才能看起来不错。
    • 正如@Gabor 所说,24 帧/秒 应该没问题。 15 帧/秒是微不足道的。询问您的摄像师,什么最适合他们为您创建的材料。有时以 30 帧/秒的速度拍摄的素材在 24 帧时看起来不连贯。(H.264 视频的工作方式,一旦低于 24 帧/秒,文件大小的节省并不像您想象的那么显着。15 帧/秒需要30 帧/秒的文件大小的一半以上。)

    【讨论】:

    • 哇,这非常详细,非常感谢!我们的视频最长为 12-15 秒,所以我认为文件大小不会超过 10MiB。但我会和摄像师一起检查。编解码器和受约束的基线配置文件如何?这是我需要做的事情,还是我可以请摄像师去做?非常感谢你的框架。我一定会请摄像师比较版本。
    • 您的 videogrqpher 在为您“导出”文件时设置比特率、帧率、配置文件、文件格式(流式 mp4)和编解码器 (H.264)。而且,我更新了我的答案,提到了比特率。
    • 好的,谢谢!我们实际上可能会使用 youtube 背景视频。我找到了一个关于如何在没有任何控件或任何控件的情况下正确显示它的解决方案。您甚至为 youtube 推荐这些设置吗?比特率、帧率、编解码器等
    • 如果您上传到 YouTube - 他们将重新编码视频,并且帧率/比特率/编解码器由他们完成。如果您“隐藏”移动视频 - 它可能仍会被下载。最好去掉video标签而不是用CSS来隐藏。
    • 对,@DougSillars。 Youtube 为流媒体处理所有这些编码。只需上传一个高质量的 .mp4 文件,剩下的交给他们处理。高质量=1080p,高比特率,高帧率。您的摄像师知道如何制作好的 youtube 源材料。在移动设备上仔细测试。
    猜你喜欢
    • 1970-01-01
    • 2020-07-09
    • 2020-07-14
    • 1970-01-01
    • 1970-01-01
    • 2015-09-07
    • 1970-01-01
    • 1970-01-01
    • 2014-10-06
    相关资源
    最近更新 更多