VePlayer

BytePlus Web player SDK，can automatically adapt to PC and H5 scenes, support MP4, HLS, FLV, DASH and other formats of on-demand and live broadcast, combined with video cloud, it has functions such as playback quality log reporting, encrypted playback, etc.

Import the SDK

Install SDK dependencies into the project through the package management tool.

npm install @byteplus/veplayer --save

Import VePlayer and style files in the project.

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

Add playback container

Add a player container on the page where the player needs to be displayed, for example, add the following code to index.html.

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

Player instantiation

After getting the video URL, instantiate the player.

Video On Demand

const player = new VePlayer({
    id: 'video', // playback container
    url: "https://demo.vod.com/xxx.mp4", // video URL
    vodLogOpts: {
        vtype: 'MP4', // Video format, the video of HLS protocol should be imported into HLS
        tag: 'Normal', // Business tags, used to distinguish different scenarios in the business, to facilitate subsequent multi-dimensional analysis
        line_app_id: 235399, // [Required] The value is int type, the SDK application id for accessing VOD, which can be obtained from VOD Console-VOD SDK-Application Management
        line_user_id: 'XXX' // User id, String or int type, if not passed in, it will be a value randomly generated according to the user's browser
    }
});

For a detailed description of VOD, refer toBytePlus - Video On Demand - Player SDK - Web

Live

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