在过去的几年中，越来越多的项目将视频作为应用程序的组成部分。这是一个很好的方向，因为视频比静态照片更具吸引力（视频可以使转换率提高一倍，并增加在网站上花费的时间），因此可以真正吸引客户来探索有关产品和服务的详细信息。但是，当存在与视频播放相关的问题时，这一切都会横摆。
视频播放问题与视频的大小和比特率直接相关。具有大尺寸或高比特率的视频将需要更长的下载时间，并且需要更高速度的网络才能流畅地播放。这将导致更长的启动时间，并且如果网络无法足够快速地提供视频，则视频将在视频播放期间停顿。
虽然有解决方案！通过对视频进行基本的优化，然后再将其添加到我们的网站，我们可以防止这些问题永久发生-大部分都是如此。我们真正需要做的就是以一种或另一种方式减小文件的大小。因此，现在的诀窍是：如何在不降低质量的情况下缩小文件？
在本文中，我们将逐步介绍优化视频播放的工具和一些步骤，所有这些操作都可以避免停顿并打动您的宝贵客户！
真实数据
找到包含超大视频的网站并不少见，例如用作英雄背景视频的网站。在我的研究中，我正在研究2020年12月的移动HTTPArchive中发现的网站，不难发现有很多网站默认情况下会在移动设备和台式机上加载巨大的视频文件。
当然，您能否实现与我在这里显示的相同的节省，但您会获得一些有用的指示和技巧，以处理视频时要记住的事情。实际上，如果您不小心，很容易将超大视频意外地放到您的网站上，导致大多数客户几乎无法使用这些视频。
想象一下，这是10月中旬，您正在寻找南瓜和玉米迷宫，与家人度过一个周末的下午。在舒适的台式机上，您可以在网上搜索附近的位置并找到理想的位置。该网站看起来很可爱，页面顶部播放着精美的无人机4K视频，其中包含各个领域的内容。您选择URL并将其发送给自己和您的亲人，以便您可以一起继续在旅途中探索此选项。
但是，当您打开手机上的页面时，您会发现一个小故障：视频正拼命试图在手机上播放，但不幸的是未能成功播放。视频不断停顿并重新播放，比计算机上的视频更具破坏性和烦人性。最终，您继续前进，将URL标记为书签，然后继续进行日常工作。
经过一段有趣的泥泞日子（好吧，我最近住在西雅图和英国，所以南瓜片很泥泞），您又回到了计算机上：也许您再次考虑了该视频，并且想知道为什么没有播放好在您的手机上。好吧，让我们诊断发生了什么。
您可能首先在浏览器中打开DevTools。页面加载完成后，我们可以移至“网络”标签，并按“媒体”进行过滤以查看所有视频文件：
网站建设
我们看到正在下载MP4文件。该文件不会作为独立文件通过网络传输；相反，流服务必须将文件分成几个部分，因此您可能会看到206对同一文件的多个（部分内容）请求。
查看此文件的响应头，我们可以发现一些细节：
现在，其中一些数字有些吓人，因为它们有些大。实际上，它们通常很大，以至于我习惯于添加逗号，因此我可以大致了解文件的大小。在这种情况下，部分下载为87 MB，整个文件为157,715,457字节。是的，没错，该视频为157MB，今天尝试将其加载到我的手机上！难怪它没有成功。
那么这段视频是怎么回事？
让我们深入一点。显然，视频太大了，无法在内存较低，网络较慢的手机上流畅播放。但是，我们需要修复什么？为了弄清楚到底是什么问题，我们可以使用FFMPEG，它是开源的，免费的，并且被证明是最优化视频的可靠工具之一。我们可以无休止地调整FFMPEG中的配置，但让我们仅涉及本文中的一些重要内容。
因此，让我们从名为FFprobe的诊断工具开始。FFprobe从多媒体流中收集信息，并为您提供有关如何编码视频以及如何播放视频的详细信息。它是FFMPEG包的一部分，实际上非常易于使用。
更好的是：如果您的视频已经在线，则可以直接访问ffprobe的在线版本。因此，我们只需要在表单中输入URL，然后获取有关视频的详细信息（例如，视频尺寸，比特率和相当多的元数据）。
当我从南瓜农场添加MP4 URL时，我们立即看到其中一个问题。show_formatffprobe的响应返回了一个摘要：显然，有2个流，并且它的长度为62s（这听起来很正常，不会引起任何怀疑）。但是当我们确定大小和比特率时，我们会立即看到视频出现故障的地方。
如上所述，习惯于将逗号添加到这些大数字中可能是一个好主意。事实证明，实地飞行的无人机画面确实为157MB，每秒比特率为20 MB！这意味着视频要无缝播放，网络必须能够以高于20 MBPS的速率流传输视频，这恰恰是视频停滞在电话中的原因。
理想的播放比特率是多少？
为避免停顿，我们需要以适当的速率传输视频。那就是比特率变得重要的地方。比特率是视频的播放速度。为了使浏览器能够流畅地播放视频，视频的下载速度必须比播放速度快-这意味着只有在网络速度超过20 MBPS时，视频才能流畅地播放。考虑到网络速度，我倾向于依靠WebPageTest的流量配置文件：
正如我们从前面的概述中可以看到的那样，该视频可能会在“本地连接”和超快速光缆FIOS连接上正常播放（20 MBPS正是所需的速度，因此希望无需下载任何其他内容）。背景）。但是，所有其他连接的下行链路速度都大大低于20 MBPS。如果视频以这些速度加载，则播放器将尝试消耗比下载速度更快的视频，并且视频将永久停滞。
视频的比特率设置了客户可以使用的最低网络速度。通常，视频的比特率应约为网络可用吞吐量的80％。因此，一个20 MBPS的视频确实需要24 MBPS的网络吞吐量才能无缝播放视频。连接速度较慢的每个人的体验都会很差，并且可能根本无法观看视频。更具体地说，这意味着要使我们在4G上流畅流畅地播放，比特率必须保持在7.2 MBPS以下。
我们可以降低此视频的比特率吗？
是的！让我们看一下可以用来降低视频比特率的一些配置。但是首先，让我们看一下从FFprobe获得的数据。值得一提的是r_frame_rate值，即视频中每秒的帧数。它的值为60000/1001。这意味着视频的帧速率为每秒60帧。但是，网络上的典型帧速率是25–30，因此我们要做的第一件事就是以较低的比特率重新编码视频。
要记住的另一件事是恒定速率因子。在FFMPEG中，主要的质量/大小基准是恒定速率因子（CRF）压缩，其值范围从0（无压缩）到50（高压缩）。FFMPEG中CRF的默认值为23（如果省略了CRF参数，则视频就是该值）。以我个人的经验，从23-28的值仍然可以产生高质量的视频，在网络上看起来不错，并且文件大小大大减小了。
因此，让我们以30fps和CRF开始23。Terminal命令将如下所示：
瞧！这样就产生了81.5 MB的视频-已经提高了48％。但是视频仍然非常大，比特率为10 MBPS。如果将CRF设置为28，则文件大小将降至35.4MB，比特率为4.5 MBPS，这很可能在4G连接上正常播放。
这是原始视频的五倍改进。为了使该视频更易于访问，我们可以调整视频大小以使其更小。我们将在下面的流媒体部分中讨论这一点。
渴望披萨的故事
想象一下，您在洛杉矶，也许是从国外访问并在手机上漫游，当然要考虑拿一片披萨。您会在手机上找到一个非凡的披萨店，然后决定去那里。您可能已经在页面上注意到了一些视频和英雄图像，但实际上，每个披萨店看起来都一样，因此您不必费心观看视频。您需要先抓一两片，然后再返回酒店。
那天晚上，您从运营商处收到一条短信，表明您使用的数据比您想象的要多得多（并且肯定比您最初计划的要多！）。几辆出租车，还有披萨网站-披萨网站又贵了多少？
您将比萨网站弹出到WebPageTest中，并通过移动连接对其进行检查：
网站建设
44 MB的视频。它来自哪里？甚至除此之外，当我们更详细地检查源和瀑布时，我们可以看到实际上有两个视频！幸运的是（或不幸的是？），两个都没有被完全下载：
| 视频1已下载 | 11.8 MB（总共121 MB） |
| 视频2已下载 | 31.1MB（总共139 MB） |
这引起了一些关注和一些问题。
首先，为什么没有自动播放时下载了这么多视频？我们尚未设法单击任何内容，但已经使用了将近40 MB的数据。答案一如既往地在于源头。好吧，就是“查看源代码”。
即时来看，我们至少看到两个问题：
- 预紧=“自动” 当我们建立
preload="auto"，我们要重写浏览器的默认设置，执行视频下载-你的客户是否已经按下“播放”。默认preload属性为metadata，将导致下载100KB的文件。诚然，对于永远不会观看此视频的网站访问者来说，这是一个更好的结果。 - 视频顺序 如果您有多个版本的视频（在这种情况下：h264 .mp4和VP8 .webm编码的视频），浏览器将选择它知道如何播放的第一个视频。现在，每种现代浏览器都支持mp4，而大多数现代浏览器还支持webm（根据CanIUse的统计，全球支持率为95.4％）。
我喜欢使用的一个技巧是使用Javascript插入适当的视频源行。这样，如果您选择不在某些屏幕上播放视频，则您只有一个空的<video>标签-无法下载任何视频。
如果现在在这两个视频上运行ffprobe，我们将发现大小上的显着差异：
| MP4 | 121.2兆字节 |
| 韦伯 | 11.8兆字节 |
由于每个浏览器都支持mp4，因此webm缩小了90％，但视图数为0。这两个视频均为640×360，长140s。ffmpeg在mp4上从上方运行命令会产生12.4 MB的视频，因此开发人员很可能也遵循类似的过程来压缩和编码.webm变体。preload="auto"毕竟，拥有12.5 MB的存储空间可能还算不错。
第二个视频（餐厅内的无人驾驶镜头）以全高清（1080p）拍摄，但类似地从140MB压缩到35MB。因此，具有FFMPEG的120s可以将该页面上的视频权重从160 MB减少到57 MB。翻转webm / mp4订单将为95％可以支持该格式的浏览器节省额外的MB。
如果我们想做得更好，或者使视频响应各种尺寸的屏幕，该怎么办？好吧，让我们获得更小的视频-具有自适应视频！
<video>标签不支持媒体查询以将不同的视频文件提供给不同的屏幕，因此我们需要一种不同的方法来提供适合设备屏幕大小的视频。最简单的方法是使用视频流。这将为视频播放器添加一些Javascript和其他资产，但是视频节省无疑将弥补这些额外的数据。
我们可以使用FFMPEG创建视频流（我过去曾经使用过bash脚本），但这需要我们知道我们要使用的所有大小和设置（并且如前所述，FFMPEG有很多设置！ ）。
为了使流媒体视频更容易，您可以在其中上传视频的API（例如api.video和Mux），这些工具可以创建视频流并为您托管视频。为了获得充分的讨论，我使用前一种方法，因此，为了简化我的视频处理流程，我将使用api.video来转码并托管我的视频。使用upload API，我可以上传任何视频，该工具将创建具有许多不同尺寸和比特率（当前为240p，360p，480p，720p，1080p和4K）的流媒体版本。
随着视频尺寸的减小，较小视频的比特率会大大降低。这意味着视频将在较小的屏幕上需要较少的网络容量，并在较慢的网络上播放。
为简便起见，我们仅测试南瓜补丁视频。无人机视频也收到了类似的结果（其他披萨视频仅为360p，因此从较小的尺寸中受益不大）。
注意：请回想一下，该视频当前是60pfps的1080p mp4视频，对所有访问者来说重157 MB。
通过一些优化（CRF 28并将帧速率降低到30fps），视频减少到35.7 MB。使用DevTools，我们可以模拟设备以查看在不同尺寸的屏幕上流式视频的视频回放中使用了多少数据。
下表显示了使用的总流量。对于HLS视频，有一个JavaScript播放器，CSS，字体等，它们增加了大约1 MB的额外开销。这包括在下面的总计中：
| 设备 | 影片大小（像素） | 影片大小（MB） | 比特率（MBPS） |
|---|---|---|---|
| Moto G4（人像） | 240p | 3.1兆字节 | 0.35 |
| Moto G4（横向） | 360p | 7.5兆字节 | 0.800 |
| Iphone 7/7/8（横向） | 480p | 12.1兆字节 | 1.40 |
| Ipad（横向） | 720p | 21.2兆字节 | 2.6 |
| Ipad Pro（横向） | 1080p | 39.4兆字节 | 4.4 |
在1080p分辨率下，流中下载了大约4MB的其他资源，但是对于其他大小，可以节省大量数据，并且视频质量没有损失。不仅可以为设备调整视频的大小，而且由于最有可能使用较慢移动连接的设备的比特率降低了，因此停顿的可能性也大大降低。
视频流处理帧率，视频大小和质量问题-确保在任何大小的屏幕和任何速度的网络上快速播放。
“
视频流的另一个优点：如果网络速度很慢（或突然变慢），则播放器可以调整正在显示的视频，并播放质量较低的视频，即使在恶劣的网络条件下也可以在设备上播放。（您可以使用StreamOrNot测试不同的视频，StreamOrNot是我不久前发布的一个开放源代码项目。
现在，这不是太多的开销吗？我们不能对YouTube或Vimeo做同样的事情（快得多）吗？我们当然可以，但是那样我们将无法从视频中完全删除品牌或广告，更不用说在视频播放器iframe中加载脚本的开销了。另外，有时您可能希望将该视频用作产品页面上的背景视频，并且完全避免使用任何外部品牌。
结论
我们不会将图像从相机直接部署到网络上，但会对其进行压缩和调整大小以平衡质量和网络性能。视频文件也应这样做。较小的视频开始播放更快，并且停顿的频率降低，从而改善了网站的用户体验。
在本文中，我们分步了一些简单的步骤来优化视频，例如降低质量和降低帧率。我们还研究了视频流如何使我们能够为网络构建更具响应性的视频体验-自动提供适合设备屏幕尺寸的视频。
感谢您的阅读，如果您想了解更多信息，您可能想在这里，Smashing Magazine和我的博客上阅读有关视频最佳做法的更多信息：
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/262310.html