多码率自适应播放--视频点播-火山引擎

文档中心

导航

多码率自适应播放

最近更新时间：2025.09.08 16:04:03首次发布时间：2025.09.08 16:04:03

多码率自适应播放是指给用户提供“自动”档位，在此档位下，VePlayer 会采用基于 HTTP 的自适应码率（ABR，Adaptive Bit-Rate）策略，选择最适合当前用户带宽环境和终端设备的码流播放，从而提升播放体验。您可以再将转码生成的自适应码流传递给 VePlayer，从而实现视频播放时根据网络环境自适应切换视频清晰度的功能。

注意

该功能仅高级版支持。请确保您已购买高级版的 License，详见播放器 License。

效果展示

VePlayer 会在清晰度列表中展示“自动”档位。用户切换到该档位时，VePlayer 开启多码率自适应播放，并实时展示当前真实档位。

兼容性说明

VePlayer 支持 HLS、DASH 和 MP4 格式的多码率自适应播放，具体兼容性说明如下表所示：

类别	平台	HLS	DASH	MP4
桌面端	Windows	Chrome > 57 Opera > 44 FireFox > 52 Edge > 16
桌面端	macOS	Chrome > 57 Safari > 11 FireFox > 52 Opera > 44 Edge > 16
移动端	iOS	Chrome > 57 Safari > 11	不支持	不支持
移动端	Android	Chrome > 57 Edge > 16 不支持手机自带浏览器，如小米手机自带浏览器。

前提条件

若您需要实现 Vid 模式下 HLS 和 DASH 视频的多码率播放，可通过视频点播自适应码流转码模板生成自适应码流文件。完整介绍请见自适应码流转码和播放。

播放 HLS 自适应码流

DirectUrl 模式：初始化 VePlayer 时，通过 playList 参数传入由视频点播媒体处理服务生成的子流及主流信息，并通过 autoBitrateOpts 参数配置多码率自适应播放。示例代码如下：

const playerSdk = new VePlayer({
  id: 'video',
  autoplay: true,
  streamType: 'hls',
  playList: [
    {
      // 子流 1 地址
      url: 'https://example.com/af2534***/*****1/stream2.m3u8',
      definition: '480p',
      bitrate: 274117,
      width: 854,
      height: 480,
      duration: 2665.698,
    },
    {
      // 子流 2 地址
      url: 'https://example.com/af2534***/*****1/stream2.m3u8',
      definition: '720p',
      bitrate: 502452,
      width: 1280,
      height: 720,
      duration: 2665.698,
    },
    {
      // 子流 3 地址
      url: 'https://example.com/af2534***/*****1/stream3.m3u8',
      definition: '1080p',
      bitrate: 502446,
      width: 1280,
      height: 720,
      duration: 2665.698,
    },
    {
      // master m3u8 主流地址
      url: 'https://example.com/af2534***/*****1/master.m3u8',
      definition: 'auto',
    },
  ],
  // 配置多码率自适应播放
  autoBitrateOpts: {
    enable: true, // 是否开启 ABR 功能。默认为 false
    startWithAuto: true, // 是否以自动档位起播。默认为 false
    showRealDefinition: true, // 自动档位是否展示真实清晰度，如 “自动（360p）”
    autoDefinitionText: '自动', // 自动档位显示文案。选填，不传则匹配 languages 的配置。
    definitionTextKey: 'DEFINITION_AUTO_DESC', // 自动档位国际化文案 key, 默认为 DEFINITION_AUTO
  },
  languages: {
    zh: {
      // 自动档位中文文案
      DEFINITION_AUTO_DESC: '自动',
    },
    en: {
      // 自动档位英文文案
      DEFINITION_AUTO_DESC: 'Auto',
    },
  },
});

Vid 模式：应用服务端生成临时播放 Token 时，将 Definition 设为 auto，将 Format 设为 hls，即可播放由视频点播媒体处理服务生成的自适应码流文件。您还可通过 autoBitrateOpts 参数配置多码率自适应播放。示例代码如下：

const playerSdk = new VePlayer({
  id: 'video',
  autoplay: true,
  getVideoByToken: {
    playAuthToken: 'playAuthTokenWhichDefinitionIsAuto',  // 
    needPoster: true,
  },
  // 配置多码率自适应播放
  autoBitrateOpts: {
    enable: true, // 是否开启 ABR 功能。默认为 false
    startWithAuto: true, // 是否以自动档位起播。默认为 false
    showRealDefinition: true, // 自动档位是否展示真实清晰度，如 “自动（360p）”
    autoDefinitionText: '自动', // 自动档位显示文案。选填，不传则匹配 languages 的配置。
    definitionTextKey: 'DEFINITION_AUTO_DESC', // 自动档位国际化文案 key, 默认为 DEFINITION_AUTO
  },
  languages: {
    zh: {
      DEFINITION_AUTO_DESC: '自动',
    },
    en: {
      DEFINITION_AUTO_DESC: 'Auto',
    },
  }
});

播放 DASH 自适应码流

对于 DASH 协议，VePlayer 仅支持 Vid 模式下的多码率自适应播放。在应用服务端生成临时播放 Token 时将 Definition 设为 auto，将 Format 设为 dash，即可播放由视频点播媒体处理服务生成的自适应码流文件。您还可通过 autoBitrateOpts 参数配置多码率自适应播放。示例代码如下：

const playerSdk = new VePlayer({
  id: 'video',
  autoplay: true,
  getVideoByToken: {
    playAuthToken: 'playAuthTokenWhichDefinitionIsAuto',
    needPoster: true,
  },
  // 配置多码率自适应播放
  autoBitrateOpts: {
    enable: true, // 是否开启 ABR 功能。默认为 false
    startWithAuto: true, // 是否以自动档位起播。默认为 false
    showRealDefinition: true, // 自动档位是否展示真实清晰度，如 “自动（360p）”
    autoDefinitionText: '自动', // 自动档位显示文案。选填，不传则匹配 languages 的配置。
    definitionTextKey: 'DEFINITION_AUTO_DESC', // 自动档位国际化文案 key, 默认为 DEFINITION_AUTO
  },
  languages: {
    zh: {
      DEFINITION_AUTO_DESC: '自动',
    },
    en: {
      DEFINITION_AUTO_DESC: 'Auto',
    },
  }
});

播放 MP4 自适应码流

视频点播自适应码流转码模板当前仅支持 HLS 和 DASH 协议。因此对于 MP4 协议，您需要自行准备播放源。您需要确保各个码率的视频之间做到 IDR 帧对齐，即确保转码输出的视频除了清晰度存在差别，其他参数均保持一致。

说明

IDR 帧（Instantaneous Decoding Refresh Picture）是一种特殊的 I 帧，它能够立即刷新图像，防止错误传播。与普通的 I 帧不同的是，IDR 帧之后的所有帧都不能引用该 IDR 帧之前的帧内容。这样做可以方便控制编码和解码流程，同时也能够实现视频的随机访问功能。在视频播放过程中，播放器通常会选择最接近指定位置的 IDR 帧进行播放，以避免复杂的反向解析过程。在多码率转码时，如果指定 IDR 帧对齐，可以保持输出视频的 IDR 帧在时间点和内容上的精确同步，从而实现多码率视频平滑切换，避免卡顿现象的出现。

DirectUrl 模式：初始化 VePlayer 时，通过 playList 参数传入多码率视频地址，并通过 autoBitrateOpts 参数配置多码率自适应播放。示例代码如下：

const playerSdk = new VePlayer({
  id: 'video',
  autoplay: true,
  playList: [
    {
      url: 'https://example.com/af2534***/*****1/stream2.mp4',
      definition: '480p',
      bitrate: 274117,
      width: 854,
      height: 480,
      duration: 2665.698,
    },
    {
      url: 'https://example.com/af2534***/*****1/stream2.mp4',
      definition: '720p',
      bitrate: 502452,
      width: 1280,
      height: 720,
      duration: 2665.698,
    },
    {
      url: 'https://example.com/af2534***/*****1/stream3.mp4',
      definition: '1080p',
      bitrate: 502446,
      width: 1280,
      height: 720,
      duration: 2665.698,
    },
  ],
  // 配置多码率自适应播放
  autoBitrateOpts: {
    enable: true, // 是否开启 ABR 功能。默认为 false
    startWithAuto: true, // 是否以自动档位起播。默认为 false
    showRealDefinition: true, // 自动档位是否展示真实清晰度，如 “自动（360p）”
    autoDefinitionText: '自动', // 自动档位显示文案。选填，不传则匹配 languages 的配置。
    definitionTextKey: 'DEFINITION_AUTO_DESC', // 自动档位国际化文案 key, 默认为 DEFINITION_AUTO
  },
  languages: {
    zh: {
      // 自动档中文文案
      DEFINITION_AUTO_DESC: '自动',
    },
    en: {
      // 自动档英文文案
      DEFINITION_AUTO_DESC: 'Auto',
    },
  },
});

Vid 模式：在应用服务端生成临时播放 Token 时，确保下发的视频之间做到 IDR 帧对齐。示例代码如下：

const playerSdk = new VePlayer({
    id: 'video',
    autoplay: true,
    getVideoByToken: {
      playAuthToken: 'playAuthTokenWhichDefinitionIsAuto',
      needPoster: true,
    },
    // 配置多码率自适应播放
    autoBitrateOpts: {
        enable: true, // 是否开启 ABR 功能。默认为 false
        startWithAuto: true, // 是否以自动档位起播。默认为 false
        showRealDefinition: true, // 自动档位是否展示真实清晰度，如 “自动（360p）”
        autoDefinitionText: '自动', // 自动档位显示文案。选填，不传则匹配 languages 的配置。
        definitionTextKey: 'DEFINITION_AUTO_DESC', // 自动档位国际化文案 key, 默认为 DEFINITION_AUTO
    },
    languages: {
        zh: {
          DEFINITION_AUTO_DESC: '自动',
        },
        en: {
          DEFINITION_AUTO_DESC: 'Auto',
        },
    }
});

事件监听

自动档位对应的清晰度发生变化时，SDK 会触发 'ABR_AUTO_DESC_CHANGE' 事件。