进阶功能

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

播放加密视频

VePlayer 搭配视频点播转码服务，可实现 MP4、HLS 和 DASH 加密视频的播放，以满足用户对版权视频安全播放的需求。

播放 HLS 标准加密视频

VePlayer 支持通过 Vid 和 DirectUrl 两种模式播放 HLS 标准加密视频。在播放之前需要业务服务端提前下发 keyToken 用于解密。

return (<Tabs defaultActiveTab="1">
  <Tabs.TabPane title="Vid 模式" key="1"><RenderMd content={`
通过 Vid+PlayAuthToken 模式播放时，您需要设置 `getVideoByToken` 参数传入 \`playAuthToken\` 和 \`keyToken\`。具体参数介绍请见 [IPlayAuthTokenConfig](https://www.volcengine.com/docs/4/1248898#iplayauthtokenconfig)。示例代码如下：

`}></RenderMd>

<PreCode lang="javascript" text={`
const playerSdk = new VePlayer({
  id: 'mse',
  width: 800,
  height: 500,
  getVideoByToken: {
    playAuthToken: 'playAuthToken',
    keyToken: 'keyToken'
  }
});
        `} />
  	
  </Tabs.TabPane>
  <Tabs.TabPane title="DirectUrl 模式" key="2"><RenderMd content={`
通过 DirectUrl 模式播放时，除了视频地址 \`url\`，还需设置 `EncryptHlsPlugin` 参数传入 \`keyToken\`。详细参数介绍请见 [IEncryptHlsPluginConfig](https://www.volcengine.com/docs/4/1248898#iencrypthlspluginconfig)。示例代码如下：

`}></RenderMd>

<PreCode lang="javascript" text={`
const playerSdk = new VePlayer({
  id: 'mse',
  width: 800,
  height: 500,
  url: 'hls的加密视频地址',
  EncryptHlsPlugin: {
    keyToken: '解密用的keyToken',
  }
})
        `} />

  </Tabs.TabPane>
</Tabs>);

切换视频

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

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

属性参数

使用私有 DRM 播放需要通过视频点播控制台提前转码输出相应的转码产物，在播放器实例化时传入以下参数：

(
  playAuthIds: string,
  vid: string,
  unionInfo: string
) => Promise<string>

业务服务端需要提供签发私有 DRM 加密 AuthToken的接口，以供业务方的 getDrmAuthToken 回调函数调用，并最终返回所需要的 PrivateDrmAuthToken。

示例代码如下：

const playerSdk = new VePlayer({
    id: 'mse',
    width: 640,
    height: 360,
    unionId: 'veplayer_demo',
    getVideoByToken: {
      playAuthToken: '加密视频的 playAuthToken',
      getDrmAuthToken: (playAuthIds, vid, unionInfo) => {
        // 获取 PrivateDrmAuthToken 回调
        // 播放器携带 playAuthIds, vid, unionInfo 请求业务方 AppServer 获取 PrivateDrmAuthToken
        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;
}

效果演示：