1. 执行以下命令，安装播放器依赖包和播放器插件依赖包。

   npm install @volcengine/veplayer@next
   npm install @volcengine/veplayer-plugin@next
   

2. 在本地工程的 index.html 文件中添加以下代码，引入播放器依赖包及依赖包样式。

   import { createLivePlayer, register } from '@volcengine/veplayer';
   import '@volcengine/veplayer/style';
   

3. 按需引入并注册插件。代码示例如下所示。

   // 播放 HLS 流。
   import { hlsjs } from '@volcengine/veplayer-plugin';
   register([hlsjs]);
   
   // 播放 FLV 流。
   import { flv } from '@volcengine/veplayer-plugin';
   register([flv]);
   
   // 播放 RTM 流。
   import { rtm } from '@volcengine/veplayer-plugin';
   register([rtm]);
   
   // 播放多种协议的流。
   import { flv, hlsjs, rtm } from '@volcengine/veplayer-plugin';
   register([rtm, flv, hlsjs]);
   

   如需减少包体积，您可以通过插件路径按需引入某个插件。例如，将 import { hlsjs } from '@volcengine/veplayer-plugin'; 替换为 import * as hlsjs from '@volcengine/veplayer-plugin/hlsjs'; 从而引入 hlsjs 插件。同样，您也可以按需引入以下插件：flv、rtm、abr、drm 和 timeshift。

调用 setLicenseConfig 并设置 license 参数，传入 License URL。有关如何获取 License URL，详见步骤二：获取 License 文件。
SDK 会自动处理鉴权逻辑，并开启自动 License 更新。示例代码如下所示。

• CDN

  VePlayer.setLicenseConfig({
      // License URL。License 升级或续签后，SDK 会自动更新至最新 License 版本，无需您手动更新。
      license: "https://example.com/obj/license/license.lic"
  }) 
  

• NPM

  import { live } from '@volcengine/veplayer';
  live.setLicenseConfig({
      // License URL。License 升级或续签后，SDK 会自动更新至最新 License 版本，无需您手动更新。
      license: "https://example.com/obj/license/license.lic"
  }) 
  

createLivePlayer({
  width: 640,
  height: 360,
  url: 'https://livepull.example.com/appname/streamname.flv',
  logger:{
    // 开启日志上报。开启后，SDK 会将播放相关信息发送至视频直播服务器，用于故障排查和分析，帮助提升应用的稳定性和用户体验。
    appId: 'APP_ID', // 必选。将 APP_ID 替换为您创建 Web 类型应用后获得的 AppID。
    userId: 'USER_ID', // 可选。将 USER_ID 替换为应用中的用户 ID。 
    deviceId: 'DEVICE_ID', // 可选。将 DEVICE_ID 替换为用户设备的 ID。 
  }
}).then(function(veplayer){
  console.log('创建播放器成功，播放器实例为', veplayer)
}).catch(function(err){
  console.log('创建播放器失败，失败报错为', err)
});