### VePlayer

[BytePlus](https://www.byteplus.com/en) 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.
```bash
npm install @byteplus/veplayer --save
```
Import VePlayer and style files in the project.
```javascript
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.
```javascript
<div id="video"></div>
```
### Player instantiation
After getting the video URL, instantiate the player.

#### Video On Demand
```javascript
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 to[BytePlus - Video On Demand - Player SDK - Web](https://docs.byteplus.com/en/byteplus-vod/docs/getting-started-with-the-sdk_2)

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