本文介绍如何快速引入 Web 端播放器 SDK（VePlayer）。

功能体验

VePlayer Web 播放器针对多种播放场景，提供了丰富的功能。您可通过 功能效果体验 页面，全面了解播放器的功能效果和接入方法。

引入依赖

在 HTML 页面内引入 VePlayer Web 播放器的样式文件和脚本文件。代码示例如下：

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

使用 VePlayer

引入 vePlayer 之后会在 window 上添加一个全局变量 VePlayer ，您可直接拷贝以下代码即可创建一个直播播放器。

// 请勿修改 appid 配置
const loggerConfig = {
    appId: '426675'// 该 appId 是火山慢直播的 appId，请固定填写为该值，便于我们收集直播错误信息，及时进行通知
}

// createLivePlayer 的配置请按根据实际业务修改，veplayer 播放器配置参考：https://www.volcengine.com/docs/6469/1155423
window.VePlayer.createLivePlayer({
    id: 'veplayer',  // 播放器挂载的 domId
    width: 640, // 播放器宽
    height: 360,// 播放器高
    url: '', // 拉流地址，调用慢直播 openAPI 可以拿到 pullUrl
    logger: {
        ...loggerConfig,
        userId: '' // 请填写您的火山引擎账号 ID（AccountId），便于在直播发生错误时及时通知到您
    },
    lang: 'zh-cn', // 播放器组件多语言设置
    autoplay: {
        muted: true // 配置为自动静音播放
    },
    flv: {
        retryCount: 3, // 网络请求重试次数
        analyzeDuration: 100 // 流分析时长，如果超过这个时间，将丢弃还未接收到的音频流或视频流，单位毫秒。建议配置的比较小，以便在遇到浏览器不支持的音频格式时也能快速出图
    }
}).then(function(veplayer){
    console.log('创建播放器成功，播放器实例为', veplayer)
}).catch(function(err){
    console.log('创建播放器失败，失败报错为', err)
});

在直播过程中，如果出现播放异常，请创建工单联系技术支持，定位并排查问题。

VePlayer 支持 OPUS / G711

通过 npm 添加以下依赖：

#  npm
npm i @volcengine/veplayer@1.9.5-rc.1 // VePlayer SDK
#  yarn
yarn add @volcengine/veplayer@1.9.5-rc.1 // VePlayer SDK

VePlayer 支持 OPUS

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

new VePlayer({
    id: 'mse',
    width: 400,
    height: 300,
    isLive: true,
    url: 'https://pull-demo.volcfcdnrd.com/live/st-4536521_webrtm.flv',
    plugins: [flv]
});

VePlayer 支持 G711

由于 MSE 无法直接播放 G.711**，** 因此必须启用软解，VePlayer 需要根据要播放的编码，选择是否启用软解

import VePlayer from '@volcengine/veplayer';
import flv from '@volcengine/veplayer/plugin/flv';
import XGVideo from '@volcengine/veplayer/plugin/XGVideo';
import '@volcengine/veplayer/index.min.css';

// G.711 编码时，需要关闭软解 MSE 模式
if (isG711) {
  XGVideo.setDecodeCapacity({
    audioWithMse: false // 针对 G.711 必须启用软解，以及不采用MSE方式的播放
  })
}

new VePlayer({
    id: 'mse',
    width: 400,
    height: 300,
    isLive: true,
    plugins: [flv],
   mediaType: 'xg-video', // G.711 编码时，需要指定 mediaType 为 xg-video
    url: 'http://10.199.75.46:10997/9njxngn02eq6gvp3/34020090991320048228_34020000001320000001.flv?vhost=hr1f7ejilsslubco.fcdn-boe-push.byted.org',
});