You need to enable JavaScript to run this app.
导航

接入指引

最近更新时间2023.11.24 19:03:35

首次发布时间2022.07.25 11:28:38

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

alt

适用版本

本文档适用于 2.1.0 版本的 Web 拉流 SDK,其他版本请参考历史文档

前提条件

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

引入依赖

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

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

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

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

添加播放器容器

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

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

实例化播放器

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

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)
});

接入其他功能

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

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