自适应码率（ABR，adaptive bitrate）是一种面向观众的直播分发技术，可在网络波动时提供流畅且高质量的播放体验。您可以预先配置多个采用不同编码方式、分辨率和码率的子流，播放器会根据观众的实时网络状况自动选择最合适的子流，在播放流畅度和画质之间取得平衡。本文介绍如何使用 Web 拉流 SDK（VePlayer）播放 HLS-ABR、RTM-ABR 和 FLV 流。

适用版本 #

建议使用最新版本的 Web 拉流 SDK。版本信息请参考发布历史，历史版本请参考历史文档。

前提条件 #

已完成 SDK 集成。如集成 2.11.2 及以上版本的 Web 拉流 SDK，确保使用高级版或试用版 License。

播放 HLS-ABR 流 #

步骤一：添加 HLS-ABR 配置 #

1. 登录视频直播控制台。
2. 在左侧导航栏，选择功能配置，再在页面右侧单击直播码率自适应页签。
3. 从域名空间下拉列表中选择目标域名空间，并单击添加配置。
4. 在基础信息页签，填写推流地址中的 AppName，并在协议类型中选择 HLS-ABR。
5. 单击添加子流，配置多个清晰度档位的子流。播放过程中，播放器会根据观众网络状况在这些档位间切换。其他配置项详见 ABR 配置。

步骤二：获取 HLS-ABR 地址 #

通过以下任一方式获取 HLS-ABR 地址：

• 功能调试阶段：使用地址生成器，在 ABR多码率地址页签下获取 HLS-ABR 地址。详见地址生成器。
• 功能正式上线：调用 GeneratePlayURL 或使用服务端 SDK 动态生成 HLS-ABR 地址。

步骤三：（可选）使用 NPM 方式引入依赖时注册插件 #

如果您使用 NPM 方式引入依赖，必须引入并注册 hlsjs 和 abr 插件，以确保 HLS 播放和 ABR 功能可用。

示例代码如下所示：

import { hlsjs, abr } from '@volcengine/veplayer-plugin';
register([hlsjs, abr]);

步骤四：配置 ABR #

创建播放器时，您可以配置 ABR 功能并监听清晰度档位切换事件。

• 配置 ABR 功能：ABR 功能在 SDK 中默认开启。您只需将 HLS-ABR 地址传入 url。播放器会请求该地址并获取主 M3U8 文件。主 M3U8 文件会列出所有可用子流，例如 1080P 和 720P 子流。播放过程中，播放器会持续监测观众网络状况，并在不同子流间自动切换。网络较差时，播放器会选择低码率子流以减少卡顿。网络恢复后，播放器会无缝切回高码率子流，从而保障流畅、稳定的观看体验。
• 监听档位切换事件：如果您希望在档位切换时实现自定义逻辑，例如更新 UI、上报切换数据等，可以监听以下事件：
  • ABR_SWITCH_START：开始切换档位。
  • ABR_SWITCH_SUCCESS：档位切换成功。
  • ABR_SWITCH_FAILED：档位切换失败。

示例代码如下所示。

VePlayer.createLivePlayer({
    width: 640,
    height: 360,
    url: 'https://pull.example.com/live/test/abr.m3u8',
}).then(function (veplayer) {
    // 监听档位切换事件。
    veplayer.on(VePlayer.live.Events.ABR_SWITCH_START, function (data) {
      console.log('ABR_SWITCH_START', data.bitrate);
    });

    veplayer.on(VePlayer.live.Events.ABR_SWITCH_SUCCESS, function (data) {
      console.log('ABR_SWITCH_SUCCESS', data.bitrate);
    });

    veplayer.on(VePlayer.live.Events.ABR_SWITCH_FAILED, function (data) {
      console.log('ABR_SWITCH_FAILED', data.bitrate);
    });
})

import { createLivePlayer, register, live } from '@volcengine/veplayer';
import { hlsjs, abr } from '@volcengine/veplayer-plugin';
import '@volcengine/veplayer/style'

register([hlsjs, abr]);

createLivePlayer({
    width: 640,
    height: 360,
    url: 'https://pull.example.com/live/test/abr.m3u8',
}).then(function (veplayer) {
    // 监听档位切换事件。
    veplayer.on(live.Events.ABR_SWITCH_START, function (data) {
      console.log('ABR_SWITCH_START', data.bitrate);
    });

    veplayer.on(live.Events.ABR_SWITCH_SUCCESS, function (data) {
      console.log('ABR_SWITCH_SUCCESS', data.bitrate);
    });

    veplayer.on(live.Events.ABR_SWITCH_FAILED, function (data) {
      console.log('ABR_SWITCH_FAILED', data.bitrate);
    });
})

播放 RTM-ABR 流 #

步骤一：添加 RTM-ABR 配置 #

1. 登录视频直播控制台。
2. 在左侧导航栏，选择功能配置，再在页面右侧单击直播码率自适应页签。
3. 从域名空间下拉列表中选择目标域名空间，并单击添加配置。
4. 在基础信息页签，填写推流地址中的 AppName，并在协议类型中选择 RTM-ABR。
5. 单击添加子流，配置多个清晰度档位的子流。播放过程中，播放器会根据观众网络状况在这些档位间切换。其他配置项详见 ABR 配置。

步骤二：获取 RTM-ABR 地址 #

通过以下任一方式获取 RTM-ABR 地址：

• 功能调试阶段：使用地址生成器，在 ABR 多码率地址页签下选择起播清晰度档位（后缀）后，获取 RTM Web SDK 播放地址。详见地址生成器。
• 功能正式上线：调用 GeneratePlayURL 或使用服务端 SDK，将 StreamType 设置为 abr，动态生成 RTM-ABR 地址。不同后缀对应不同的起播清晰度档位，请从返回结果中选择一个 Protocol 取值为 rtm-abr、Tag 取值为 RTM-ABR-WebSDK 的地址起播。

步骤三：（可选）使用 NPM 方式引入依赖时注册插件 #

如果您使用 NPM 方式引入依赖，必须引入并注册 rtm 和 abr 插件，以确保 RTM 播放和 ABR 功能可用。

示例代码如下所示：

import { rtm, abr } from '@volcengine/veplayer-plugin';
register([rtm, abr]);

步骤四：配置 ABR #

创建播放器时，您可以配置 ABR 功能并监听清晰度档位切换事件。

• 配置 ABR 功能：ABR 功能在 SDK 中默认开启。您只需将一个 RTM-ABR 地址传入 url。地址中的后缀决定起播清晰度档位。播放过程中，视频直播服务端会根据观众网络状况自动切换清晰度档位。网络较差时，视频直播服务端会切换到低码率流以减少卡顿。网络恢复后，视频直播服务端会无缝切回高码率流，从而保障流畅、稳定的观看体验。
• 监听档位切换事件：如果您希望在档位切换时实现自定义逻辑，例如更新 UI、上报切换数据等，可以监听以下事件：
  • ABR_SWITCH_START：开始切换档位。
  • ABR_SWITCH_SUCCESS：档位切换成功。
  • ABR_SWITCH_FAILED：档位切换失败。

示例代码如下所示。

VePlayer.createLivePlayer({
    width: 640,
    height: 360,
    url: 'https://pull.example.com/live/test_sd_autortm.sdp?rtmabr=true',
}).then(function (veplayer) {
    // 监听档位切换事件。
    veplayer.on(VePlayer.live.Events.ABR_SWITCH_START, function (data) {
      console.log('ABR_SWITCH_START', data.bitrate);
    });

    veplayer.on(VePlayer.live.Events.ABR_SWITCH_SUCCESS, function (data) {
      console.log('ABR_SWITCH_SUCCESS', data.bitrate);
    });

    veplayer.on(VePlayer.live.Events.ABR_SWITCH_FAILED, function (data) {
      console.log('ABR_SWITCH_FAILED', data.bitrate);
    });
})

import { createLivePlayer, register, live } from '@volcengine/veplayer';
import { rtm, abr } from '@volcengine/veplayer-plugin';
import '@volcengine/veplayer/style'

register([rtm, abr]);

createLivePlayer({
    width: 640,
    height: 360,
    url: 'https://pull.example.com/live/test_sd_autortm.sdp?rtmabr=true',
}).then(function (veplayer) {
    // 监听档位切换事件。
    veplayer.on(live.Events.ABR_SWITCH_START, function (data) {
      console.log('ABR_SWITCH_START', data.bitrate);
    });

    veplayer.on(live.Events.ABR_SWITCH_SUCCESS, function (data) {
      console.log('ABR_SWITCH_SUCCESS', data.bitrate);
    });

    veplayer.on(live.Events.ABR_SWITCH_FAILED, function (data) {
      console.log('ABR_SWITCH_FAILED', data.bitrate);
    });
})

播放 FLV 流 #

步骤一：添加 ABR 配置 #

1. 登录视频直播控制台。
2. 在左侧导航栏，选择功能配置，再在页面右侧单击直播码率自适应页签。
3. 从域名空间下拉列表中选择目标域名空间，并单击添加配置。
4. 在基础信息页签，填写推流地址中的 AppName。
5. 单击添加子流，配置多个清晰度档位的子流。播放过程中，播放器会根据观众网络状况在这些档位间切换。其他配置项详见 ABR 配置。

步骤二：获取不同清晰度档位的 FLV 地址 #

使用地址生成器生成不同清晰度档位的 FLV 拉流地址。生成地址时，按以下规则填写：

• 地址类型：选择拉流地址。
• 选择域名：选择添加 ABR 配置时所使用域名空间下的拉流域名。
• AppName 和 StreamName：根据推流地址填写。如果推流地址为 rtmp://push.example.com/live/test?authinfo，则 AppName 为 live。填写 StreamName 时，先确定基础流名称 test，再根据清晰度档位拼接对应的子流后缀。例如，超清档位填写 test_uhd，高清档位填写 test_hd。

按上述方式分别生成并记录每个清晰度档位的 FLV 拉流地址。

示例

下表展示了不同清晰度档位的 FLV 地址及其对应的码率：

步骤三：（可选）使用 NPM 方式引入依赖时注册插件 #

如果您使用 NPM 方式引入依赖，必须引入并注册 flv 和 abr 插件，以确保 FLV 低延时和 ABR 功能可用。

示例代码如下所示：

import { flv, abr } from '@volcengine/veplayer-plugin'
register([flv, abr]);

由于部分移动端浏览器（如 iOS 16 之前的 Safari）无法播放 FLV 流，为确保直播在这些设备上仍能正常播放，SDK 提供了 HLS 降级方案。启用此方案后，当播放器检测到当前浏览器不支持播放 FLV 流时，会自动切换到备用的 HLS 流进行播放。为确保降级功能正常生效，如果您通过 NPM 方式引入依赖，请务必同时引入并注册 hlsjs 插件。示例代码如下所示。

import { flv, hlsjs, abr } from '@volcengine/veplayer-plugin';
register([flv, hlsjs, abr]);

步骤四：在 SDK 中配置 ABR 并开启 FLV 低延时 #

在创建播放器时，您可以通过以下配置，为观众打造低延迟、高流畅且全平台兼容的直播体验：

• 配置 ABR 功能：ABR 功能在 SDK 中默认开启。您只需提供一个包含多个码率及对应 FLV 拉流地址的列表，播放器即可根据观众的网络状况，在直播期间自动切换档位，从而在保障流畅度的同时提供优质画质。
• 监听档位切换事件：如果您希望在档位切换时实现自定义逻辑，例如更新 UI、上报切换数据等，可以监听以下事件：
  • ABR_SWITCH_START：开始切换档位。
  • ABR_SWITCH_SUCCESS：档位切换成功。
  • ABR_SWITCH_FAILED：档位切换失败。
• 移动端 HLS 降级方案：部分移动端浏览器（如 iOS 16 之前的 Safari）不支持播放 FLV 流。为确保直播在这些设备上也能正常播放，您可以在配置 FLV 拉流地址的同时，提供一个备用的 HLS 拉流地址。当播放器检测到当前浏览器不支持播放 FLV 流时，会自动切换到 HLS 流进行播放。

示例代码如下所示。

VePlayer.createLivePlayer({
    width: 640,
    height: 360,
    playlist: [
      {
        definitions: [
          // 初始播放档位的 FLV 拉流地址。
          'https://pull.example.com/live/123456_uhd.flv',
          // 用于降级播放的 HLS 拉流地址，可通过控制台的地址生成器生成。
          'https://pull.example.com/live/123456_uhd.m3u8',
        ],
      },
    ],
    flv: {
      abr: {
        // 初始播放档位的码率。单位为 bps。
        bitrate: 3200000,
        // 各档位的码率和 FLV 拉流地址。码率单位为 bps。
        urls: {
          3200000: 'https://pull.example.com/live/123456_uhd.flv',
          2048000: 'https://pull.example.com/live/123456_hd.flv',
          1638000: 'https://pull.example.com/live/123456_sd.flv',
          1024000: 'https://pull.example.com/live/123456_ld.flv',
         }
     }
  },
    fallback: {
      // 先尝试播放低延迟 FLV 流。当播放器检测到当前浏览器无法播放低延迟 FLV 流时，会自动降级播放 HLS 流。
      fallbackOrder: ['ll-flv', 'hls'],
    }
}).then(function (veplayer) {
    // 监听档位切换事件。
    veplayer.on(VePlayer.live.Events.ABR_SWITCH_START, function (data) {
      console.log('ABR_SWITCH_START', data.bitrate);
    });

    veplayer.on(VePlayer.live.Events.ABR_SWITCH_SUCCESS, function (data) {
      console.log('ABR_SWITCH_SUCCESS', data.bitrate);
    });

    veplayer.on(VePlayer.live.Events.ABR_SWITCH_FAILED, function (data) {
      console.log('ABR_SWITCH_FAILED', data.bitrate);
    });
})

import { createLivePlayer, register, live } from '@volcengine/veplayer';
import { flv, hlsjs, abr } from '@volcengine/veplayer-plugin';
import '@volcengine/veplayer/style'

register([flv, hlsjs, abr]);

createLivePlayer({
    width: 640,
    height: 360,
    playlist: [
      {
        definitions: [
           // 初始播放档位的 FLV 拉流地址。
          'https://pull.example.com/live/123456_uhd.flv',
          // 用于降级播放的 HLS 拉流地址，可通过控制台的地址生成器生成。
          'https://pull.example.com/live/123456_uhd.m3u8',
        ],
      },
    ],
    flv: {
      abr: {
        // 初始播放档位的码率。单位为 bps。
        bitrate: 3200000,
        // 各档位的码率和 FLV 拉流地址。码率单位为 bps。
        urls: {
          3200000: 'https://pull.example.com/live/123456_uhd.flv',
          2048000: 'https://pull.example.com/live/123456_hd.flv',
          1638000: 'https://pull.example.com/live/123456_sd.flv',
          1024000: 'https://pull.example.com/live/123456_ld.flv',
        }
      }
    },
    fallback: {
      // 先尝试播放低延迟 FLV 流。当播放器检测到当前浏览器无法播放低延迟 FLV 流时，会自动降级播放 HLS 流。
      fallbackOrder: ['ll-flv', 'hls'],
    }
}).then(function (veplayer) {
    // 监听档位切换事件。
    veplayer.on(live.Events.ABR_SWITCH_START, function (data) {
      console.log('ABR_SWITCH_START', data.bitrate);
    });

    veplayer.on(live.Events.ABR_SWITCH_SUCCESS, function (data) {
      console.log('ABR_SWITCH_SUCCESS', data.bitrate);
    });

    veplayer.on(live.Events.ABR_SWITCH_FAILED, function (data) {
      console.log('ABR_SWITCH_FAILED', data.bitrate);
    });
})