VePlayer

火山引擎视频云Web播放器SDK，自动适配PC和H5场景，支持MP4、HLS、FLV、DASH等多种格式的点播和直播，结合视频云具有播放质量日志上报、加密播放等功能。

引入依赖

通过包管理工具将 SDK 的依赖安装到项目中。

npm install @volcengine/veplayer --save

在项目中引入 VePlayer 和样式文件。

import VePlayer from '@volcengine/veplayer';
import '@volcengine/veplayer/index.min.css';

添加播放容器

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

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

播放器实例化

在获取到视频地址后，实例化播放器。

点播

const player = new VePlayer({
    id: 'video', // 视频容器dom的id
    url: "https://demo.vod.com/xxx.mp4", // 视频地址
    vodLogOpts: {
        vtype: 'MP4', // 视频格式，HLS协议的视频请传入HLS
        tag: '普通视频', // 业务标签，用于区分业务中不同的场景，方便后续进行多维度分析
        line_app_id: 348293, // 【必选】该值为 int 类型，接入视频点播的SDK应用id，可以从点播控制台-点播SDK-应用管理获取
        line_user_id: 'XXX' // 用户 id， String 或者 int 类型, 不传入将是一个根据用户浏览器随机生成的值
    }
});

点播功能的详细说明参考火山引擎-视频点播-Web 点播SDK

直播

const playerSdk = new VePlayer({
  id: 'video',
  isLive: true,
  url: '//livepull.example.com/appname/streamname.flv'
});

直播功能的详细说明参考火山引擎-视频直播-Web SDK-拉流SDK