You need to enable JavaScript to run this app.
导航

进阶功能

最近更新时间2024.01.11 11:56:46

首次发布时间2021.05.17 17:30:40

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

播放加密视频

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

注意

如果加密视频不是由视频点播转码服务生成的,那么 VePlayer 无法保证能够正确播放。

播放 HLS 标准加密视频

注意

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

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

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

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

通过 Vid+PlayAuthToken 模式播放时,您需要设置 getVideoByToken 参数传入 playAuthTokenkeyToken,示例代码如下:

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

切换视频

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

Vid+PlayAuthToken 模式下切换视频的示例代码如下:

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

        

兼容性

系统/浏览器说明
PC Chrome支持 34 以上版本。
PC Edge部分支持 Windows 10+。

移动端 iOS 系统

部分支持 iOS 10 及以上系统。

注意

不支持 iOS 11.2 ~ 11.4 的系统。

移动端 Android 系统

部分支持 Android 5 及以上系统。

注意

不支持播放器被劫持环境,如 UC 浏览器、QQ 浏览器以及部分手机厂家自带的浏览器(例如,VIVO)。

播放私有 DRM 加密视频

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

属性参数

使用私有 DRM 播放需要通过控制台提前转出相对应的转码产物,在播放器实例化时传入以下几项参数:

参数名类型是否必填默认值含义
unionIdString-唯一 ID,用于生成混淆密钥的用户唯一相关的 unionInfo。您在接入时请保证每一个用户的 unionId 是唯一的,没有其他格式限制。
getVideoByToken.playAuthTokenString-服务端下发的播放临时安全凭证,下发时指定 FileType evideoFormat 指定为需要的播放格式,详见 客户端播放

getVideoByToken.getDrmAuthToken

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

-

获取 PrivateDrmAuthToken 回调函数,播放器调用时会传入视频的 playAuthIdsvid 和与用户唯一相关的 unionInfo

说明

业务方需要通过这些参数调用业务方服务端接口获取 PrivateDrmAuthToken,并将 PrivateDrmAuthToken 在回调中以 Promise 形式返回以供播放器解密播放使用。

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

说明

在 Web 端私有 DRM 播放时,需要指定参数 DrmType 取值为 webdevice

示例代码如下:

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);
      }
    },
  });

兼容性

系统/浏览器说明
PC Chrome支持 34 以上版本的 HLS、MP4、DASH 的格式/协议。
PC Edge支持 Windows 10 及以上系统的 HLS、MP4、DASH 的格式/协议。

移动端 iOS 系统

部分支持 iOS 10 及以上系统,仅支持 HLS 协议。

注意

不支持 iOS 11.2 ~ 11.4 的系统。

移动端 Android 系统

部分支持 Android 5 及以上系统,支持 HLS、MP4、DASH 的格式/协议。

注意

不支持播放器被劫持环境,如 UC 浏览器、QQ 浏览器以及部分手机厂家自带的浏览器(例如,VIVO)。

播放 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 播放配置。

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 }
    }
  });
});

说明

具体参数见接口说明 DashPluginConfig

兼容性

系统/浏览器说明
PC Chrome支持 34 以上版本。
PC Edge部分支持 Windows 10+。
移动端 iOS 系统仅支持 iPadOS 13 以上系统。

移动端 Android 系统

部分支持 Android 5 及以上系统。

注意

不支持播放器被劫持环境,如 UC 浏览器、QQ 浏览器。

说明

移动端不推荐使用 DASH 进行播放,更推荐兼容性比较好的 HLS 和 MP4 格式。

播放 H.265 视频

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

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

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

说明

如果开启了 H.265 兼容模式,且以 URL 形式播放,推荐提供视频的编码格式 codec,否则 VePlayer 会拉取码流进行编码格式自动检测,这将会消耗一定流量(约 300kb),并延缓起播速度( 约 0.5s )。

自定义 UI

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

方法一:设置关键点颜色

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

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

注意

该方式通过设置元素的 style 属性来更改样式,因此其权重要高于您自定义的 CSS 样式。

效果演示:

方法二:设置图标元素

您可以在设置中传入 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 和对应的插件名称。

图标配置 Key图标说明对应插件名称(不区分大小写)备注
play控制栏播放按钮图标play
pause控制栏暂停按钮图标play
startPlay屏幕中间开始播放按钮图标start
startPause屏幕中间暂停播放按钮图标start
loadingIcon屏幕中间加载时的图标loading
replay播放结束时屏幕中间重播按钮图标replay
fullscreen进入全屏按钮图标fullscreen
exitFullscreen退出全屏按钮图标fullscreen
cssFullscreenCSS 进入全屏按钮图标cssFullscreen仅开启 CSS 全屏生效
exitCssFullscreenCSS 退出全屏按钮图标cssFullscreen仅开启 CSS 全屏生效
pipIcon控制栏开启画中画按钮图标pip
pipIconExit控制栏退出画中画按钮图标pip
volumeSmall音量较小时按钮图标volume
volumeLarge音量较大时按钮图标volume
volumeMuted静音时按钮图标volume
rotate视频旋转按钮图标rotate
download下载按钮图标download下载功能仅播放 MP4 格式视频时生效
seekTipIconSeek 时的图标mobile仅移动端生效
playNext下一集按钮图标playNext
danmuSetting弹幕设置按钮图标danmuPlugin
openDanmu打开弹幕角标图标danmuPlugin
closeDanmu关闭弹幕角标图标danmuPlugin
vttSubOpen外挂字幕开启按钮图标Subtitle
vttSubClose外挂字幕关闭按钮图标Subtitle

方法三:覆盖 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;
}

效果演示: