快速开始--视频点播-火山引擎

文档中心

立即注册

导航

快速开始

最近更新时间：2025.04.22 11:09:53首次发布时间：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>

说明

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

步骤 3：配置 License

注意

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

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

设置 License 文件内容

设置 License 文件在线地址

调用 setLicenseConfig 并设置以下参数：

sign：对应 License 文件中的 Signature 字段，用于鉴权。
content：对应 License 文件中的 Content 字段，包含该 license 的权限等级、版本信息等。
mainUrl：（非必填，推荐设置）License 文件的在线地址，对应 License 文件中的 MainUrl 字段。若您设置该字段，则 license 升级或续期后，SDK 会自动更新至最新 license 版本，无需您手动更新。

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

调用 setLicenseConfig 并设置 license 参数，传入 license 文件的在线地址。SDK 会自动处理鉴权逻辑。

VePlayer.setLicenseConfig({
    // License 文件的在线地址。设置后，SDK 会开启 License 自动更新，即 License 升级或续期后，SDK 会自动更新至最新 License 版本，无需您手动更新
    license: "http://example.volcengine.com/obj/vod-license/license.lic"
})

说明

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

步骤 4：实例化播放器

VePlayer 支持两种播放模式：

DirectUrl 模式

Vid 模式

使用 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: '普通视频', //（可选）业务标签，对应单点追查功能的业务类型维度，用于区分业务中不同的场景，方便后续进行拆维分析。
  }
});

后续操作

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