本文为您介绍 VePlayer 的接入步骤。通过接入 VePlayer,您可以在网页上添加一个视频播放器。
说明
VePlayer 针对多种播放场景,提供丰富的功能。在接入前,您可通过 Demo 体验和了解 VePlayer 的功能。
视频点播通过 License 管理播放器 SDK 及其增值服务的使用权限和时间。在项目测试阶段,您可以在视频点播控制台申请免费的测试 License。您需完成以下操作:
注意
测试 License 仅限项目测试阶段使用,不可续期。测试 License 到期会导致鉴权失败,进而影响业务的正常使用。项目上线前,请升级至正式 License。
选择以下任一方式添加 SDK 依赖:
在需要展示播放器的页面添加播放器容器,例如在 index.html
中加入以下代码:
<div id="video"></div>
说明
播放器的大小会根据容器的大小而自适应变化。若容器未指定大小,则可能导致播放器无法正常显示。您也可以通过在实例化播放器时设置 width
和 height
参数指定播放器的大小。
注意
License 校验采用页面级校验机制,即使在单页面多实例场景下,您也只需进行一次设置,多实例可共享同一配置。此外,为优化播放体验,建议在初始化播放器前配置 License,以提升首帧加载速度,确保流畅播放。VePlayer 支持以下方式配置 License:
调用 setLicenseConfig
并设置 sign
、content
和 mainUrl
参数。
VePlayer.setLicenseConfig({ license: { sign: "xxx", // 对应 License 文件中的 Signature 字段,用于鉴权 content: "xxx", // 对应 License 文件中的 Content 字段,包含该 license 的权限等级、版本信息等 mainUrl: "xxx", // 对应 License 文件中的 MainUrl 字段。License 文件的在线地址。若您设置该字段,则 License 升级或续期后,SDK 会自动更新至最新 License 版本,无需您手动更新 }, })
说明
localhost
和 IP 127.0.0.1
,License 校验结果默认为高级版 License 权限。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 厂商进行配置。
您需接入播放质量上报功能,以便在视频点播控制台的质量平台监控一些关键的播放指标,如播放量、播放失败率和首帧时间等。此外,视频点播还支持单点追查功能,允许您根据用户或设备标识,查询特定用户或设备的播放记录。详细说明请见数据看板和单点追查。
可在实例化播放器时,通过设置 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: '普通视频', //(可选)业务标签,对应单点追查功能的业务类型维度,用于区分业务中不同的场景,方便后续进行拆维分析。 } });
参考以下文档,实现封面、画中画、预览缩略图、加密视频播放等功能: