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

播放 HLS 标准加密视频

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

兼容性说明

已知限制

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

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

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

实现方式

在播放视频之前，您的应用服务端需要下发 HLS 标准加密 Token 给应用客户端用于解密。视频点播服务端 SDK 提供接口用于签发 HLS 标准加密 AuthToken，详见以下文档：

• 签发 HLS 标准加密 Token - Java SDK
• 签发 HLS 标准加密 Token - Python SDK
• 签发 HLS 标准加密 Token - PHP SDK
• 签发 HLS 标准加密 Token - Go SDK

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

const playerSdk = new VePlayer({
  id: 'mse',
  width: 800,
  height: 500,
  getVideoByToken: {
    playAuthToken: 'playAuthToken',
    keyToken: 'keyToken'
  }
});

const playerSdk = new VePlayer({
  id: 'mse',
  width: 800,
  height: 500,
  url: 'hls的加密视频地址',
  EncryptHlsPlugin: {
    keyToken: '解密用的keyToken',
  }
})

切换视频

如想在不销毁播放器的情况下更换视频源，可调用播放器实例的 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
  }
});
        

播放私有加密视频

火山引擎视频点播的私有加密方案采用火山引擎自研加密算法，安全级别高，能够便捷、高效、安全地保护您的音视频版权。更多介绍，请见私有 DRM 方案。
VePlayer 支持播放 HLS、MP4 和 DASH 格式的私有加密视频。

兼容性说明

实现方式

在播放私有加密视频之前，您需要进行以下操作：

• 通过视频点播控制台提前转码输出加密视频。
• 应用服务端下发私有加密 Token 给应用客户端用于解密。视频点播服务端 SDK 提供接口用于签发私有加密 Token，详见以下文档：
  • 签发私有加密 Token - Java SDK
  • 签发私有加密 Token - Python SDK
  • 签发私有加密 Token - PHP SDK
  • 签发私有加密 Token - Go SDK
  • 签发私有加密 Token - Node.js SDK

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

const playerSdk = new VePlayer({
    id: 'mse',
    width: 640,
    height: 360,
    // 唯一 ID，用于生成混淆密钥的用户唯一相关的 unionInfo。您需要保证每一个用户的 unionId 是唯一的，没有其他格式限制
    unionId: 'veplayer_demo',
    getVideoByToken: {
      playAuthToken: '加密视频的 playAuthToken',
      getDrmAuthToken: (playAuthIds, vid, unionInfo) => {
        // 获取私有加密 Token 回调
        // 播放器携带 playAuthIds, vid, unionInfo 请求业务方 AppServer 获取私有加密 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' // 视频编码格式
});

自定义 UI

VePlayer 支持通过三种方式自定义播放器 UI。其中，方式一和方式二仅支持更改播放器局部颜色或图标，方式三则是自定义程度最高也最为通用的方式。您可以结合这三种方式来满足您 UI 设计的需求。

方法一：设置关键点颜色

您可通过配置项 commonStyle 设置一些关键点的颜色，如进度条颜色。以下是支持的设置示例和说明：

commonStyle: {
  // 进度条底色
  progressColor: '#f4f4f4',
  // 播放完成部分进度条底色
  playedColor: '#e3db68',
  // 缓存部分进度条底色
  cachedColor: '#ffb027',
  // 进度条滑块样式，支持字符串或 Style 样式对象
  sliderBtnStyle: {
    backgroundColor: '#6b47e2'
  },
  // sliderBtnStyle: 'rgb(46 70 146)';
  // 音量颜色
  volumeColor: '#5bed67'
},

效果演示：

方法二：设置图标元素

您可以在设置中传入 SVG 图标来更改各个功能按钮的图标。

• 通过配置项 icons 传入图标。每一项都需要是返回 HTMLElement 类型的函数。以更改外挂字幕开启按钮的图标为例：

  icons: {
    // 图标配置 Key
    vttSubOpen: () => {
        const img = document.createElement('img');
        img.src = 'https://p6-addone.byteimg.com/tos-cn-i-hhc0kcolqq/92573eef59104db4acdc990fcc7a14cf.png~tplv-hhc0kcolqq-image.image';
        img.width = 20;
        img.height = 20;
        return img;
    }
  },
  

• 您也可以对各个包含图标的插件的配置项 icons 进行单独设置，支持传入类型为 string | url |（） => HTMLElement。以更改 Control 栏播放按钮的图标为例：

  // 插件名称
  play: {
    icons: {
      play: '<img src="https://p6-addone.byteimg.com/tos-cn-i-hhc0kcolqq/7e93776a1f854453ba809add03f3647e.svg~tplv-hhc0kcolqq-image.image">',
    }
  },
  

效果演示：

下表列出了图标配置 Key 和对应的插件名称。

方法三：覆盖 CSS 改写样式

您可以自行添加 CSS 进行样式覆盖。以下示例展示了如何将播放器中间的播放按钮位置移至左下角、更改进度条拖拽按钮、更改底部控制栏的背景样式。

.xgplayer .xgplayer-controls {
    background-color: #7fd3f0;
    background-image: none;
}
.xgplayer .xgplayer-start {
    left: 50px;
    bottom: 50px;
    top: unset;
}
.xgplayer-pc .xgplayer-progress .xgplayer-progress-btn {
    width: 24px;
    height: 24px;
    box-shadow: none;
    background:none;
}
.xgplayer .xgplayer-progress-btn:before {
    background-image: url("https://p6-addone.byteimg.com/tos-cn-i-hhc0kcolqq/0689ad58f2a94789bca639eac7fecc02.png~tplv-hhc0kcolqq-image.image");
    background-size: 100% 100%;
    background-color: transparent;
    width: 20px;
    height: 20px;
}

效果演示：