使用指南

本章以播放器 Web SDK v4.4.0.1版本为例，适用于源视频文件存于BOS、VOD及HLS/FLV/WebRTC直播等场景，对于HLS/FLV/WebRTC直播，请您在初始化播放器（即调用setup方法）时，添加配置参数'isLive: true'。

1.准备工作

播放器 SDK Web端（cyberplayer）自 4.4.0.1 版本起需获取 License 授权后方可使用。若您无需使用新增的高级功能，可直接申请标准版 License 以继续免费使用 cyberplayer；若您需要使用新增的高级功能则需购买高级版 cyberplayer。具体信息如下：

说明

• 播放器 Web 端标准版 License 可免费申请,申请后有效期默认1年；到期后可免费申请续期
• 播放器 Web 端高级版 License ,申请后试用期30天；到期后可申请购买
• 为方便本地开发，播放器不会校验 localhost 或者 127.0.01，因此申请 License 时不需要申请这类本地服务域名
• 为方便客户使用，播放器会在License过期7天内提示客户去申请续期，超过7天播放器将会终止使用

2. 集成SDK

cyberplayer 的接入步骤包括：引入依赖、添加播放器容器、实例化播放器、使用其他功能。下面为您介绍 cyberplayer 的接入指引。通过接入 cyberplayer，您可以在网页上添加一个视频播放器。

1. 引入依赖

cyberplayer 支持以下 3 种资源获取方式。不同获取方式下，引入依赖的操作方法存在差异。

UMD引入

请您在本地的项目工程内新建 index.html 文件，在 html 页面内引入 cyberplayer 的脚本文件。 代码如下所示:

1   <script src="https://bce-cdn.bj.bcebos.com/jwplayer/4.4.0.1/cyberplayer.js"></script>

离线包引入

点击cyberplayer.zip，下载 SDK 压缩包至本地。 将 SDK 压缩包解压到项目文件目录下。例如，解压到 lib 目录下。

解压后的目录结构如下所示:

1  cyberplayer-<version>.zip
2        │   ├── skins
3        │   │   ├── {skin}.css (播放器样式)
4        │   ├── cyberplayer.js
5        │   ├── missile.js (用于H.265 、AV1软解使用，无需在html中单独引入)
6        │   ├── missile.wasm 
7        │   ├── missile-simd.js (用于H.265 、AV1软解使用，无需在html中单独引入)
8        │   ├── missile-simd.wasm
9        │   ├── missile-min.js (用于H.265 、AV1软解使用，无需在html中单独引入)
10        │   ├── missile-min.wasm
11        │   ├── license.js (用于License鉴权，无需在html中单独引入)
12        │   ├── license.wasm

在您的 Web 应用代码的 html 文件中，通过<script src="${文件路径}/cyberplayer.js"></script> 引入依赖。例如，解压在 lib 目录下，引入依赖的代码示例如下所示。

1<script src="./lib/cyberplayer.js" type="text/javascript"></script>

NPM引入

通过包管理工具将 SDK 的依赖安装到项目中。

npm install @baiduplayer/cyberplayer

在项目中引入 cyberplayer

import cyberplayer from '@baiduplayer/cyberplayer';

2. 添加播放器容器

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

1<div id="playerContainer"></div>

3. 实例化播放器

根据业务使用在setup方法传入相关参数使用，代码示例如下所示。

1 const playerSdk = cyberplayer('playerContainer').setup({
2             width:640,
3             height:360,
4             autostart:true,
5             stretching:'uniform',
6             volume:100,
7             controls:true,
8             appid:'XXXXp',  // 参考准备工作部分，appid对应百度智能云控制台申请 License 后的licenseID
9             licenseUrl:'./lib/XXX.license',  // License文件路径，百度智能云控制台申请后，将下载下来的.license文件存放到项目目录中，以静态资源方式传入。注意：.license文件名不能更改
10             file:"xxx.mp4"
11          });

4. 使用其他功能

支持使用其他功能：

• 支持直播（flv、hls、WebRTC）、点播（mp4、flv、hls、ts）播放
• 支持封面设置、画中画、打点及缩略图、截图等基础功能设置

接入API具体请参考开发指南，同时为便于用户便捷开发，百度智能云提供了功能完备的播放器Demo，详见web播放器演示。