本文指导您如何使用 Web 播放器 SDK 播放 HLS 格式的视频，包括普通 HLS 视频和 HLS 标准加密视频。

前提条件

• 配置域名跨域 (CORS)：播放 HLS 视频时，您必须为播放域名配置正确的 CORS 相关的 HTTP 响应头，以允许 Web 页面获取 M3U8 和 TS 文件。具体操作步骤请见配置 HTTP 响应头。需要的 header 如下：

  响应头名称	响应头值
  Access-Control-Allow-Origin	或者包含业务方 Web 页面的 Origin
  Access-Control-Allow-Methods	或者包含 GET,HEAD,OPTIONS
  Access-Control-Expose-Headers	或者包含 Range

• 使用 HTTPS 协议：在 HTTPS 页面上播放视频时，必须使用 HTTPS 协议的播放链接，并确保您的播放域名已配置有效的 SSL 证书。如果是 Vid 模式播放，在服务端生成临时播放凭证 playAuthToken 时需要指定 Ssl 为 1。以 Go SDK 生成 playAuthToken 为例：

  query := &request.VodGetPlayInfoRequest{
                  Vid:             vid,
                  Format:          "hls",
                  FileType:        "video",
                  Ssl:             "1",          
  }
  

  说明

  如果项目前期测试时没有 SSL 证书，则需要在播放器实例化 options 参数的getVideoByToken 配置里添加 reqParams: { Ssl: 0 }。

播放普通 HLS 视频

您可以通过 DirectUrl 模式或 Vid 模式来播放普通的、未加密的 HLS 视频。

DirectUrl 模式

直接传入 HLS 视频的 M3U8 文件地址，并设置 streamType为 hls。

const playerSdk = new VePlayer({
  id: 'player-container',
  width: 600,
  height: 360,
  streamType: 'hls',
  url: 'https://your-domain/your-video.m3u8',
  codec: 'h264',
  vodLogOpts: {
    vtype: 'HLS',
    tag: '普通视频',
    line_app_id: 123456//（必选）number 类型，视频点播应用 ID。可在视频点播控制台 > 播放器 SDK > 应用管理页面获取。
    line_user_id: 123456, //（必选）用户 ID， String 或者 number 类型。对应于单点追查功能的设备 ID 维度。
  }
});

Vid 模式

通过 Vid 和 playAuthToken 进行播放。您需要在服务端生成 playAuthToken 时，指定 Format 为 hls。服务端生成临时播放 Token 时需要指定 FileType、 Format 和 Codec，请确保对应 Vid 的视频有转出相应格式和编码的视频，否则会按照服务端的策略下发其他格式协议的视频。播放 H.265 编码的 HLS 视频需要指定 Format 为 hls，指定 Codec 为 H265。Format 和 Codec 支持的值及其默认值见获取播放地址接口的请求参数。服务端生成 Token（Go 示例）：

query := &request.VodGetPlayInfoRequest{
                Vid:             vid,
                Format:          "hls",
                Codec:            "H265",
                FileType:        "video",
                Ssl:             "1", // 建议在 HTTPS 页面开启         
}

客户端初始化播放器：

const playerSdk = new VePlayer({
  id: 'player-container',
  width: 600,
  height: 360,
  getVideoByToken: {
    playAuthToken: 'your_play_auth_token'
  },
  vodLogOpts: {
    vtype: 'HLS',
    tag: '普通视频',
    line_app_id: 123456, //（必选）number 类型，视频点播应用 ID。可在视频点播控制台 > 播放器 SDK > 应用管理页面获取。
    line_user_id: 123456, //（必选）用户 ID， String 或者 number 类型。对应于单点追查功能的设备 ID 维度。
  }
});

播放 HLS 标准加密视频

HLS 标准加密 (AES-128) 是一种通用的内容保护方案。播放此类视频的核心是让播放器能够获取到正确的解密密钥。本章节指导您如何使用 Web 播放器 SDK 播放 HLS 标准加密视频。

场景一：播放由视频点播生成的加密视频

若您的加密视频是通过视频点播的媒体处理服务生成的，播放器 SDK 可以与云端服务深度协同，提供便捷、安全的播放体验。在播放前，您必须完成以下准备工作：

1. 搭建解密服务：您需要自行搭建并部署一个服务，该服务能够根据播放器请求中的信息，返回正确的解密密钥。
2. 进行加密转码：在视频点播控制台创建媒体处理模板，开启 HLS 标准加密并填入您的解密服务地址，然后对您的视频进行转码。

详细步骤请参考HLS 标准加密（新版）文档。完成准备工作后，您可以通过 Vid 模式（推荐） 或 DirectUrl 模式来播放加密视频。

Vid 模式

此方式通过 Vid 和 playAuthToken 进行播放，流程更安全，并支持自定义鉴权参数。

• 服务端生成 PlayAuthToken：​您的应用服务端需要调用 GetPlayInfo 接口生成 playAuthToken。在调用时，必须将 FileType 参数设置为 standard_evideo（加密视频）或 standard_eaudio（加密音频）。

  // Go SDK 示例
  query := &request.VodGetPlayInfoRequest{
                  Vid:             vid,
                  Format:          "hls",
                  Codec:            "H265",
                  FileType:  "standard_evideo", // 关键参数：指定获取加密文件
                  Ssl:             "1", // 建议在 HTTPS 页面开启         
  }
  

• 客户端初始化播放器：​在 getVideoByToken 配置项中，除了传入 playAuthToken，若您配置 HLS 标准加密改写，则还可通过 urlQueryParams 参数，为播放器请求 M3U8 文件的 URL 添加自定义鉴权参数。

  const playerSdk = new VePlayer({
    id: 'player-container',
    width: 600,
    height: 360,
    getVideoByToken: {
      urlQueryParams: {
        hlsSign: 'your_app_auth_token'
      },
      playAuthToken: 'your_play_auth_token_for_encrypted_video',
    },
    // ... 其他配置
  });
  

播放器 SDK 将自动处理后续的播放信息获取、密钥请求和解密播放。

DirectUrl 模式

此方式需要您在服务端手动获取完整的播放地址，然后再交给客户端播放。

• 服务端获取播放地址：您的应用服务端调用 GetPlayInfo 接口，获取加密视频的 M3U8 播放地址。同样需要将 FileType 参数设置为 standard_evideo 或 standard_eaudio。
• 客户端初始化播放器：播放器端的配置与播放普通 HLS 视频完全一致，只需将获取到的加密视频 URL 传入即可。

场景二：播放由第三方生成的加密视频

若您的 HLS 标准加密视频由第三方服务生成，只要其符合 HLS 规范，同样可以使用 Web 播放器 SDK 进行播放。您只需通过 DirectUrl 模式，将第三方提供的 M3U8 播放地址直接传入播放器即可。播放器端的配置与播放普通 HLS 视频完全一致。在这种模式下，播放器会直接请求 M3U8 文件中 #EXT-X-KEY 标签指定的密钥 URI。您需要确保该 URI 是公网可访问的，并且相关的跨域策略 (CORS) 已正确配置。

播放策略说明

• 在 PC 端，VePlayer 默认使用 MSE 插件方式播放 HLS 视频，可带来更灵活的播放策略，如清晰度无缝切换、buffer 控制等。
• 在 H5 端，考虑到手机的性能及浏览器兼容性，VePlayer 采用原生 Video 方式播放 HLS 视频。如需在 H5 端也强制使用 MSE 插件，可在播放器初始化时配置 enableHlsMSE: true。