本文为您介绍 VePlayer 的接入步骤。通过接入 VePlayer,您可以在网页上添加一个视频播放器。
说明
VePlayer 针对多种播放场景,提供丰富的功能。在接入前,您可通过 Demo 体验和了解 VePlayer 的功能。
选择以下任一方式添加 SDK 依赖:
在需要展示播放器的页面添加播放器容器,例如在 index.html
中加入以下代码:
<div id="video"></div>
播放器的大小会根据容器的大小而自适应变化。若容器未指定大小,则可能导致播放器无法正常显示。您也可以通过在实例化播放器时设置 width
和 height
参数来指定播放器的大小。
VePlayer 支持两种播放模式:
使用 DirectUrl 模式播放视频时,在实例化播放器时传入播放器容器 ID 和播放地址,即可实现视频播放。代码示例如下:
const playerSdk = new VePlayer({ id: 'video', url: 'http://example.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: '普通视频', // 【可选】业务标签,对应单点追查功能的业务类型维度,用于区分业务中不同的场景,方便后续进行拆维分析。 } });
参考以下文档,接入 VePlayer 的设置封面、画中画、预览缩略图、加密视频播放等功能: