Web 拉流 SDK （VePlayer）的接入步骤包括：引入依赖、添加播放器容器、播放器实例化和接入其他功能。您可参考本文档，在网页上添加一个视频播放器。

适用版本

本文档适用于 2.5.1 版本的 Web 拉流 SDK，其他版本请参考历史文档。

前提条件

如果您使用火山引擎的 CDN，请先完成以下操作。

• 已完成域名添加，并配置 CNAME。
• 已生成拉流地址。
• 如果您需要使用 HTTPS 类型拉流地址，请先添加证书，并开启 HTTPS 配置。
• 已完成 Web 类型应用创建并获取 AppID。

引入依赖

CDN 方式引入

通过 CDN 方式引用播放器的脚本和样式文件。

1. 在项目工程中新建 index.html 文件。

2. 引入以下播放器的 CSS 样式文件和 JavaScript 脚本文件。

   <link rel="stylesheet" href="https://lf-unpkg.volccdn.com/obj/vcloudfe/sdk/@volcengine/veplayer/2.5.1/umd/veplayer.production.css">
   <script src="https://lf-unpkg.volccdn.com/obj/vcloudfe/sdk/@volcengine/veplayer/2.5.1/umd/veplayer.production.js"></script>
   

NPM 方式引入

1. 安装播放器依赖包和播放器插件依赖包。

   npm install @volcengine/veplayer@v2.5.1
   npm install @volcengine/veplayer-plugin@v2.5.1
   

2. 引入播放器依赖包及依赖包样式。

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

3. 按需引入对应播放格式插件并进行插件注册。

   // 播放 HLS 格式
   import { hls } from '@volcengine/veplayer-plugin';
   register([hls]);
   
   // 播放 FLV 格式
   import { flv } from '@volcengine/veplayer-plugin';
   register([flv]);
   
   // 播放 RTM 格式
   import { rtm } from '@volcengine/veplayer-plugin';
   register([rtm]);
   
   // 需要播放多种格式
   import { flv, hls, rtm } from '@volcengine/veplayer-plugin';
   register([rtm, flv, hls]);
   

添加播放器容器

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

<div id="veplayer"></div>

实例化播放器

页面加载后，即可播放音视频资源。在直播场景下，您可通过传入拉流地址，拉取直播流进行播放。

通过 CDN 集成时的实例化播放器方法

VePlayer.createLivePlayer({
  width: 640,
  height: 360,
  url: 'https://livepull.example.com/appname/streamname.flv',
  logger:{
    appId: '2****4'
  }
}).then(function(veplayer){
  console.log('创建播放器成功，播放器实例为', veplayer)
}).catch(function(err){
  console.log('创建播放器失败，失败报错为', err)
});

通过 NPM 集成时的实例化播放器方法

createLivePlayer({
  width: 640,
  height: 360,
  url: 'https://livepull.example.com/appname/streamname.flv',
  logger:{
    appId: '2****4'
  }
}).then(function(veplayer){
  console.log('创建播放器成功，播放器实例为', veplayer)
}).catch(function(err){
  console.log('创建播放器失败，失败报错为', err)
});

接入其他功能

VePlayer 支持封面设置、画中画、预览缩略图等功能，同时结合直播场景，提供了清晰度自动降级、RTM 拉流播放等高级功能，接入方法请参考 功能集成 文档。

VePlayer 针对多种播放场景，提供了丰富的功能，您可在线体验视频云播放器，全面了解功能效果和接入方法。