You need to enable JavaScript to run this app.
导航
集成 SDK
最近更新时间:2025.03.25 14:53:35首次发布时间:2021.02.23 10:42:42
我的收藏
有用
有用
无用
无用

本文为您介绍 VePlayer 的接入步骤。通过接入 VePlayer,您可以在网页上添加一个视频播放器。

说明

VePlayer 针对多种播放场景,提供丰富的功能。在接入前,您可通过 Demo 体验和了解 VePlayer 的功能。

获取 License

视频点播通过 License 管理播放器 SDK 及其增值服务的使用权限和时间。在项目测试阶段,您可以在视频点播控制台申请免费的测试 License。您需完成以下操作:

注意

测试 License 仅限项目测试阶段使用,不可续期。测试 License 到期会导致鉴权失败,进而影响业务的正常使用。项目上线前,请升级至正式 License

集成步骤

步骤 1:添加依赖

选择以下任一方式添加 SDK 依赖:

步骤 2:添加播放器容器

在需要展示播放器的页面添加播放器容器,例如在 index.html 中加入以下代码:

<div id="video"></div>

说明

播放器的大小会根据容器的大小而自适应变化。若容器未指定大小,则可能导致播放器无法正常显示。您也可以通过在实例化播放器时设置 widthheight 参数指定播放器的大小。

步骤 3:配置 License

注意

  • 自 1.11.0 版本起,您必须按以下操作配置 License,才可使用播放器 SDK。
  • 请确保播放器所在页面的域名和申请 License 时填写的域名保持一致,或者是填写域名的子域名,否则 License 校验将不会通过。

License 校验采用页面级校验机制,即使在单页面多实例场景下,您也只需进行一次设置,多实例可共享同一配置。此外,为优化播放体验,建议在初始化播放器前配置 License,以提升首帧加载速度,确保流畅播放。VePlayer 支持以下方式配置 License:

调用 setLicenseConfig 并设置 signcontentmainUrl 参数。

VePlayer.setLicenseConfig({
  license: {
    sign: "xxx", // 对应 License 文件中的 Signature 字段,用于鉴权
    content: "xxx", // 对应 License 文件中的 Content 字段,包含该 license 的权限等级、版本信息等
    mainUrl: "xxx", // 对应 License 文件中的 MainUrl 字段。License 文件的在线地址。若您设置该字段,则 License 升级或续期后,SDK 会自动更新至最新 License 版本,无需您手动更新
 },
})

说明

  • 初始化播放器后,播放器界面若无相关错误提示,且可以正常播放视频,则表示 License 校验成功。
  • 为方便开发者进行本地集成与调试,对于本地域名 localhost 和 IP 127.0.0.1,License 校验结果默认为高级版 License 权限。

步骤 4:实例化播放器

VePlayer 支持两种播放模式:

使用 DirectUrl 模式播放视频时,在实例化播放器时传入播放器容器 ID 和播放地址,即可实现视频播放。示例代码如下:

const playerSdk = new VePlayer({
  id: 'video',
  // 替换成真正的视频地址
  url: 'http://example.volcengine.com/video.mp4'
});

也可以通过 root 参数传入播放器容器的 DOM,适用于在 React 或 Vue 框架中以 ref 形式传递播放器容器 DOM。

const playerSdk = new VePlayer({
    root: document.getElementById('video'),
    // 替换成真正的视频地址
    url: 'http://example.volcengine.com/video.mp4'
});

说明

非 MP4 格式的视频或者加密视频,需要视频资源配置 CORS 跨域。如果是 CDN 资源,则需要联系 CDN 厂商进行配置。

步骤 5:播放质量上报

您需接入播放质量上报功能,以便在视频点播控制台的质量平台监控一些关键的播放指标,如播放量、播放失败率和首帧时间等。此外,视频点播还支持单点追查功能,允许您根据用户或设备标识,查询特定用户或设备的播放记录。详细说明请见数据看板单点追查
可在实例化播放器时,通过设置 vodLogOpts 参数来配置播放质量上报。详细的参数说明请见 IVodLogOptsConfig。示例代码如下:

const player = new VePlayer({
  id: 'video',
  width: 600,
  height: 400,
  url: "https://demo.vod.com/xxx.mp4",
  vodLogOpts: {
    line_app_id: XXXX, //(必选)number 类型,视频点播应用 ID。可在视频点播控制台 > 播放器 SDK > 应用管理页面获取。
    line_user_id: 'XXX', //(必选)用户 ID, String 或者 number 类型。对应于单点追查功能的设备 ID 维度。
    tag: '普通视频', //(可选)业务标签,对应单点追查功能的业务类型维度,用于区分业务中不同的场景,方便后续进行拆维分析。
  }
});

后续操作

参考以下文档,实现封面、画中画、预览缩略图、加密视频播放等功能: