本文为您介绍如何实现 VePlayer 提供的进阶功能。

播放 HLS 标准加密视频

VePlayer 可播放由视频点播媒体处理服务生成的 HLS 标准加密视频，以满足用户对版权视频安全播放的需求。

兼容性说明

已知限制

VePlayer 播放 HLS 标准加密视频存在以下已知限制：

• 对于移动端 Android 系统，不支持在 UC 浏览器、QQ 浏览器以及部分手机厂商（如 VIVO）自带浏览器等播放器被劫持环境中使用。
• 对于移动端 iOS 系统，不支持 11.2 - 11.4 的版本（国内影响范围 0.65% 以内）。

对于不支持的浏览器环境，建议您进行风险评估，减少在这类环境下加密视频内容的投放或引导用户跳转至 App 端播放。

前提条件

• 通过视频点播媒体处理服务转码输出 HLS 标准加密视频。详见 HLS 标准加密。
• 应用服务端生成并下发 HLS 标准加密 Token 给应用客户端用于解密。视频点播服务端 SDK 提供接口用于签发 HLS 标准加密 Token，详见以下文档：
  • Java SDK - 签发 HLS 标准加密 Token
  • Python SDK - 签发 HLS 标准加密 Token
  • PHP SDK - 签发 HLS 标准加密 Token
  • Go SDK - 签发 HLS 标准加密 Token

实现方式

VePlayer 支持通过 Vid 和 DirectUrl 两种模式播放 HLS 标准加密视频，具体说明如下：

const playerSdk = new VePlayer({
  id: 'mse',
  width: 800,
  height: 500,
  getVideoByToken: {
    playAuthToken: 'playAuthToken', // 从应用服务端获取的临时播放 Token
    keyToken: 'keyToken' // 从应用服务端获取的 HLS 标准加密 Token
  }
});

const playerSdk = new VePlayer({
  id: 'mse',
  width: 800,
  height: 500,
  url: 'hls的加密视频地址',
  EncryptHlsPlugin: {
    keyToken: '解密用的keyToken', // 从应用服务端获取的 HLS 标准加密 Token
  }
})

切换视频

如想在不销毁播放器的情况下更换视频源，可调用播放器实例的 playNext 方法。Vid 和 DirectUrl 两种模式均支持通过这种方式切换视频。

playerSdk.playNext({
  getVideoByToken: {
    playAuthToken: 'new playAuthToken', // 新的 playAuthToken
    keyToken: 'new keyToken' // 新的 keyToken
  }
});

        

playerSdk.playNext({
   url: 'new url', // 新的 HLS 加密视频播放地址
  EncryptHlsPlugin: {
    keyToken: 'new keyToken' // 新的 keyToken
  }
});
        

播放私有加密视频

火山引擎视频点播的私有加密方案采用火山引擎自研加密算法，安全级别高，能够便捷、高效、安全地保护您的音视频版权。

兼容性说明

VePlayer 支持播放 HLS、MP4 和 DASH 格式的私有加密视频。具体兼容性说明如下表所示。

前提条件

• 通过视频点播媒体处理服务转码输出私有加密视频，详见火山引擎私有加密。
• 应用服务端生成并下发私有加密 Token 给应用客户端用于解密。视频点播服务端 SDK 提供接口用于签发私有加密 Token，详见以下文档：
  • Java SDK - 签发私有加密 Token
  • Python SDK - 签发私有加密 Token
  • PHP SDK - 签发私有加密 Token
  • Go SDK - 签发私有加密 Token
  • Node.js SDK - 签发私有加密 Token

实现方式

VePlayer 仅支持通过 Vid 模式播放私有加密视频。您需要在实例化播放器时传入 unionId、 getVideoByToken.playAuthToken 和 getVideoByToken.getDrmAuthToken 参数。具体参数说明，请见 IPlayerConfig。示例代码如下：

const playerSdk = new VePlayer({
    id: 'mse',
    width: 640,
    height: 360,
    // 唯一 ID。您自行设置，需要保证每一个用户的 unionId 是唯一的，没有其他格式限制。SDK 会使用这个 unionId 生成用于二次加密密钥的 unionInfo，有效时长为 30 秒
    unionId: 'veplayer_demo',
    getVideoByToken: {
      // 从应用服务端获取的临时播放 Tokeb
      playAuthToken: '加密视频的 playAuthToken',
      // 从应用服务端获取私有加密 Token 回调
      // SDK 内部自行通过 playAuthToken 从视频点播服务获取到 playAuthId
      getDrmAuthToken: (playAuthIds, vid, unionInfo) => {
        // SDK 内部携带 playAuthId、vid、unionInfo 向应用服务端请求获取私有加密 Token
        const request = window.fetch(`http://video-service.demo.com/api/GetDrmKeyToken/?kid=${encodeURIComponent(playAuthIds)}&vid=${vid}&uid=${unionInfo}`);
        return request.then(res => res.json()).then(data => data.result);
      }
    },
  });

播放 DASH 视频

应用服务端下发指定 DASH 格式的 PlayAuthToken，即可快速实现 DASH 视频的播放。如果是指定为加密的 DASH 视频，也能按照以下示例代码快速实现 DASH 格式的加密视频播放。

const playerSdk = new VePlayer({
  id: 'mse',
  width: 800,
  height: 500,
  streamType: 'dash',
  getVideoByToken: {
    playAuthToken: '指定DASH格式且为加密视频的playAuthToken'
  }
});

面对一些灵活的需求场景时，您可自行获取 DASH 播放信息，并设置 VePlayer 的 DASH 播放配置。具体参数介绍请见 IDashPluginConfig。示例代码如下：

const Service = window.VePlayer.Service;

const playAuthToken = '指定DASH格式且为加密视频的playAuthToken';
Service.url(playAuthToken, '//vod.volcengineapi.com').then((res) => {
  // 业务侧处理 DASH 的相关配置
  const playerSdk = new VePlayer({
    id: 'mse',
    lang: 'zh',
    width: 800,
    height: 500,
    DASHPlugin: {
      vid: res.Vid,
      playInfoType: 'TOP',
      getLicenseUrl: '//i.snssdk.com/video/drm/v1/play_licenses',
      definitionText: { '360p': '流畅 360p', '480p': '清晰 480p', '720p': '高清 720p', '1080p': '超高清 1080p' },
      defaultDefinition: '360p',
      preloadTime: 180,
      defaultFormat: 'dash',
      dashOpts: { Data: res }
    }
  });
});

播放 H.265 视频

H.265 编码格式支持更高的压缩效率，相同的清晰度下，能够节省码率 40%，在保证画质的条件下，达到节省带宽流量的目的。VePlayer 支持 H.265 视频编码格式，能够为您节省流量。

兼容性说明

实现方式

在不支持 H.265 的浏览器环境下设置 enableH265Degrade 为 true，当播放 H.265 视频时可以 H.265 兼容模式进行适配播放，代码示例如下所示。

const playerSdk = new VePlayer({
    id: 'video',
    width: 800,
    height: 500,
    url: 'xx265.mp4',
    enableH265Degrade: true, // 开启 H.265 兼容模式
    codec: 'h265' // 视频编码格式
});