中断缓冲竞争_如何在不中断的情况下提供流畅的播放（缓冲）

淡淡的烟草味﹌ 2023-02-22 01:28 9阅读 0赞

中断缓冲竞争

![Cloudinary][]

There's only one thing worse than no internet:  unreliable internet.  The frustration I feel when one page loads quickly, then the next very slow (if at all), and then a mixture is unmanageable.  Like...throw your device across the room frustrating.  This slowness is most apparent when trying to play media, more specifically video where it's visually janky and the sound is getting cut off and you're seething with fury.

有没有比没有互联网更糟糕的一件事：不可靠的互联网。 我感到沮丧的是，一页快速加载，然后一页非常慢(如果有的话)，然后混合无法处理。 就像...把您的设备扔到整个房间令人沮丧。 在尝试播放媒体时，尤其是视频时，这种缓慢感最为明显，视频在视觉上显得比较僵硬，声音被切断，让您感到愤怒。

Last week I wrote about [HTML5 Video Best Practices][] and the awesome utilities provided by Cloudinary to place optimized and configurable videos within your site.  [Cloudinary][Cloudinary 1] lets you customize the video poster, video controls, and even apply filters and transformations to the video itself.  Taking a deeper look, you can even control the bitrate and codecs levels, allowing for better customization of video delivery.

上周，我写了有关[HTML5视频最佳做法][HTML5 Video Best Practices]以及Cloudinary提供的超赞实用程序的信息，这些实用程序将优化和可配置的视频放置在您的站点中。 [通过Cloudinary][Cloudinary 1] ，您可以自定义视频海报，视频控件，甚至可以对视频本身应用过滤器和转换。 从更深入的角度看，您甚至可以控制比特率和编解码器级别，从而更好地自定义视频交付。

## 上载影片 **(**Uploading a Video**)** ##

You can upload a video within the Cloudinary website but let's have some fun and use the Cloudinary Node.js API to upload a video:

您可以在Cloudinary网站上上传视频，但让我们玩得开心，并使用Cloudinary Node.js API上传视频：

cloudinary.uploader.upload('sample-video.mp4', function(result) {
      // Callback
      console.log('result: ', result);
    }, {
      public_id: 'sample-video',
      resource_type: 'video'
    });

Cloudinary provides PHP, Python, and a host of other API libraries.  Once  the video is uploaded, you can call the following method to retrieve the video's optimal HTML string:

Cloudinary提供PHP，Python和许多其他API库。 视频上传后，您可以调用以下方法来检索视频的最佳HTML字符串：

cloudinary.video('sample-video');
    
    /*
    <video poster='http://res.cloudinary.com/david-wash-blog/video/upload/sample-video.jpg'>
        <source src='http://res.cloudinary.com/david-wash-blog/video/upload/sample-video.webm' type='video/webm'>
        <source src='http://res.cloudinary.com/david-wash-blog/video/upload/sample-video.mp4' type='video/mp4'>
        <source src='http://res.cloudinary.com/david-wash-blog/video/upload/sample-video.ogv' type='video/ogg'>
    </video>
    */

## 操纵视频质量和比特率 **(**Manipulating Video Quality & Bit Rate**)** ##

Depending on the device, browser, traffic load, length of video, or a range of other variables, you may want to be able to modify the quality or bit rate of a video on your site.  Though quality and bit rate are two separate manipulations, remember that the higher the bit rate, the higher the quality.

根据设备，浏览器，流量负载，视频长度或一系列其他变量的不同，您可能希望能够修改站点上视频的质量或比特率。 尽管质量和比特率是两个单独的操作，但是请记住，比特率越高，质量越高。

Let's first set a desired quality:

让我们首先设置所需的质量：

cloudinary.video('sample-video', { quality: 50 });

Setting desired bit rate is just as easy:

设置所需的比特率很容易：

cloudinary.video('sample-video', { bit_rate: '250k' });

The API is so easy to use, no surprises!

该API非常易于使用，不足为奇！

## 自适应比特率流-HLS和MPEG **(**Adaptive Bitrate Streaming - HLS and MPEG**)** ##

Adaptive bitrate streaming is a video delivery technique that adjusts the quality of a video stream in real time according to detected bandwidth and CPU capacity. This enables videos to start quicker, with fewer buffering interruptions, and at the best possible quality for the current device and network connection, to maximize user experience.

自适应比特率流传输是一种视频传输技术，可根据检测到的带宽和CPU容量实时调整视频流的质量。 这使视频可以更快地开始播放，而缓冲中断更少，并且当前设备和网络连接的质量最好，以最大化用户体验。

Cloudinary can automatically generate and deliver all of these files from a single original video, transcoded to either or both of the following protocols:

Cloudinary可以从单个原始视频自动生成并交付所有这些文件，并将其转码为以下两种协议中的一种或两种：

*  HTTP Live Streaming (HLS)
    
    HTTP实时流(HLS)
 *  Dynamic Adaptive Streaming over HTTP (MPEG-DASH)
    
    HTTP上的动态自适应流(MPEG-DASH)

Setting up streaming is a multistep (but easy) process -- let's have a look at how to make that happen!

设置流式传输是一个多步骤(但很容易)的过程-让我们看看如何实现这一点！

### 第一步：选择一个流配置文件 **(**Step One:  Select a Streaming Profile**)** ###

Cloudinary provides a collection of predefined `streaming profiles`, where each profile defines a set of representations according to suggested best practices.

Cloudinary提供了预定义的`streaming profiles`的集合，其中每个配置文件根据建议的最佳实践定义了一组表示。

For example, the `4k` profile creates 8 different representations in 16\*9 aspect ratio, from extremely high quality to audio only, while the `sd` profile creates only 3 representations, all in 4:3 aspect ratio. Other commonly used profiles include the`hd` and `full_hd` profiles.

例如， `4k`配置文件以16 \* 9的宽高比创建8个不同的表示形式，从极高的质量到仅音频，而`sd`轮廓仅创建3个表示形式，全部以4：3的宽高比表示。 其他常用配置文件包括`hd`和`full_hd`配置文件。

To view the full list of available predefined streaming profiles and the settings for each representation, see [Predefined streaming profiles][].

要查看可用的预定义流配置文件的完整列表以及每种表示形式的设置，请参阅[预定义流配置文件][Predefined streaming profiles] 。

### 第二步：通过包含流配置文件和格式的轻松转换上传视频 **(**Step Two:  Upload Your Video with an Eager Transformation Including the Streaming Profile and Format**)** ###

A single streaming profile is comprised of [many derived files][], so it can take a while for Cloudinary to generate them all. Therefore, when you upload your video (or later, explicitly), you should include eager, asynchronous transformations with the required streaming profile and video format.

单个流配置文件由[许多派生文件组成][many derived files] ，因此Cloudinary可能需要一段时间才能全部生成它们。 因此，当您上传视频时(或以后，明确地)，您应该包括渴望的异步转换以及所需的流配置文件和视频格式。

You can even eagerly prepare your videos for streaming in both formats and you can include other video transformations as well. However, make sure the streaming\_profile is provided as a separate component of chained transformations.

您甚至可以急切地准备以两种格式流式传输的视频，还可以包括其他视频转换。 但是，请确保将streaming\_profile作为链式转换的单独组件提供。

For example, this upload command encodes the `big_buck_bunny.mp4` video to HLS format using the `full_hd`streaming profile:

例如，此上传命令使用`full_hd`流配置文件将`big_buck_bunny.mp4`视频编码为HLS格式：

cloudinary.uploader.upload("big_buck_bunny.mp4", 
            function(result) {console.log(result); }, 
            { resource_type: "video", 
            eager: [
                { streaming_profile: "full_hd", format: "m3u8" }],                                   
            eager_async: true,
            eager_notification_url: "http://mysite/notify_endpoint",
            public_id: "bb_bunny"});

### 第三步：视频传递 **(**Step Three:  Video Delivery**)** ###

After the eager transformation is complete, deliver your video using the `.m3u8` (HLS) or `.mpd` (MPEG-DASH) file format (extension) and include the `streaming_profile` (`sp_<profilename>`) and other transformations exactly matching those you provided in your eager transformation (as per the URL that was returned in the upload response).

急切的转换完成后，请使用`.m3u8` (HLS)或`.mpd` (MPEG-DASH)文件格式(扩展名)交付视频，并包括`streaming_profile` ( `sp_<profilename>` )和其他与您在您提供的转换中完全匹配的转换急切进行转换(根据上载响应中返回的URL)。

cloudinary.video("bb_bunny.m3u8", {streaming_profile: "hd"})

Being able to change bit rate and quality on the fly is an awesome capability.  Sure, you could use your own utilities to generate files at various bit rates and qualities but that seems like a waste of time and energy when [Cloudinary][Cloudinary 1] makes it so easy.  And when you can stream via Cloudinary as well?  What a bonus. When you add the ability to [optimize and transform imagery][], [generate waveform images][], [remove photo backgrounds][], [tag images][], and [automate image updates][tag images],  using Cloudinary is an easy decision for multi-purpose media management!

能够即时更改比特率和质量是一项了不起的功能。 当然，您可以使用自己的实用程序以各种比特率和质量生成文件，但是当[Cloudinary][Cloudinary 1]变得如此简单时，这似乎是在浪费时间和精力。 以及何时还可以通过Cloudinary流式传输？ 真是加分。 当您添加了[优化和转换图像][optimize and transform imagery] ， [生成波形图像][generate waveform images] ， [删除照片背景][remove photo backgrounds] ， [标记图像][tag images]以及[自动化图像更新的功能时][tag images] ，使用Cloudinary对于多功能介质管理来说是一个容易的决定！

> 翻译自: [https://davidwalsh.name/cloudinary-video][https_davidwalsh.name_cloudinary-video]

中断缓冲竞争

[Cloudinary]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9jbG91ZGluYXJ5X3ZlcnRpY2FsX2xvZ29fZm9yX3doaXRlX2JnLnBuZw?x-oss-process=image/format,png
[HTML5 Video Best Practices]: https://davidwalsh.name/html5-video
[Cloudinary 1]: http://cloudinary.com/?utm_source=DWB&utm_medium=Sponsored_Post_7&utm_content=Buffering&utm_term=Video-Transcoding
[Predefined streaming profiles]: http://cloudinary.com/documentation/video_manipulation_and_delivery?utm_source=DWB&utm_medium=Sponsored_Post_7&utm_content=Buffering&utm_term=Video-Transcoding#predefined_streaming_profiles
[many derived files]: http://cloudinary.com/documentation/video_manipulation_and_delivery?utm_source=DWB&utm_medium=Sponsored_Post_7&utm_content=Buffering&utm_term=Video-Transcoding#derived_adaptive_streaming_files
[optimize and transform imagery]: https://davidwalsh.name/image-optimization-cloudinary
[generate waveform images]: https://davidwalsh.name/generate-waveform-images-audio-cloudinary
[remove photo backgrounds]: https://davidwalsh.name/remove-photo-backgrounds-cloudinary
[tag images]: https://davidwalsh.name/automatic-image-tagging-cloudinary
[https_davidwalsh.name_cloudinary-video]: https://davidwalsh.name/cloudinary-video