You need to enable JavaScript to run this app.
导航
集成 SDK
最近更新时间:2024.12.06 17:25:40首次发布时间:2021.02.23 10:42:42

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

说明

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

操作步骤

步骤 1:添加依赖

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

步骤 2:添加播放器容器

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

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

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

步骤 3:实例化播放器

VePlayer 支持两种播放模式:

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

const playerSdk = new VePlayer({
  id: 'video',
  url: 'http://example.com/video.mp4'
});

说明

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

步骤 4:实现播放质量上报

您需接入播放质量上报功能,以便在视频点播控制台的质量平台监控一些关键的播放指标,如播放量、播放失败率和首帧时间等。此外,视频点播还支持单点追查功能,允许您根据用户或设备标识,查询特定用户或设备的播放记录。详细说明请见数据看板单点追查
可在实例化播放器时,通过设置 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 的设置封面、画中画、预览缩略图、加密视频播放等功能: