接入指引

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

前提条件

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

• 已完成域名添加，并配置 CNAME。
• 已生成拉流地址。
• 如果您需要使用 https 拉流地址，请先添加证书，并开启 HTTPS 配置。
• 联系技术支持获取 AppID。

引入依赖

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

npm install @volcengine/veplayer

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

添加播放器容器

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

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

播放器实例化

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

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

接入其他功能

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

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