Web 播放器 SDK 接入说明

本文介绍如何快速引入 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)
});

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