百度智能云播放器 Web SDK (以下简称“播放器 SDK”) 是百度官方推出的用于开发网页播放器的软件开发工具包。
使用cyberplayer播放需要先登录百度智能云官网。获取AK播放器鉴权做准备。
播放器鉴权将保证您在正式授权的前提下正常使用播放器的各项功能。百度智能云通过验证AK 的方式进行签名授权。若未经授权,播放过程中会显示警告消息。
cyberplayer 的接入步骤包括:引入依赖、添加播放器容器、实例化播放器、使用其他功能。下面为您介绍 cyberplayer 的接入指引。通过接入 cyberplayer,您可以在网页上添加一个视频播放器。
cyberplayer 支持以下 3 种资源获取方式。不同获取方式下,引入依赖的操作方法存在差异。
NPM引入
通过包管理工具将 SDK 的依赖安装到项目中。
npm install @baiduplayer/cyberplayer
在项目中引入 cyberplayer
import cyberplayer from '@baiduplayer/cyberplayer';
UMD引入
请您在本地的项目工程内新建 index.html 文件,在 html 页面内引入 cyberplayer 的脚本文件。 代码如下所示:
<script src="https://bce-cdn.bj.bcebos.com/jwplayer/4.3.1.2/cyberplayer.js"></script>
离线包引入
点击cyberplayer.zip,下载 SDK 压缩包至本地。 将 SDK 压缩包解压到项目文件目录下。例如,解压到 lib 目录下。
解压后的目录结构如下所示:
cyberplayer-<version>.zip
│ ├── skins
│ │ ├── {skin}.css (播放器样式)
│ ├── cyberplayer.js
│ ├── missile.js (用于H.265 、AV1软解使用,无需在html中单独引入)
│ ├── missile.wasm
│ ├── missile-simd.js (用于H.265 、AV1软解使用,无需在html中单独引入)
│ ├── missile-simd.wasm
│ ├── missile-min.js (用于H.265 、AV1软解使用,无需在html中单独引入)
│ ├── missile-min.wasm
在您的 Web 应用代码的 html 文件中,通过 <script src="${文件路径}/cyberplayer.js"></script>
引入依赖。例如,解压在 lib 目录下,引入依赖的代码示例如下所示。
<script src="./lib/cyberplayer.js" type="text/javascript"></script>
在需要展示播放器的页面添加播放器容器,例如,在 index.html 中加入以下代码。
<div id="playerContainer"></div>
根据业务使用在setup方法传入相关参数使用,代码示例如下所示。
const playerSdk = cyberplayer('playerContainer').setup({
width:640,
height:360,
autostart:true,
stretching:'uniform',
volume:100,
controls:true,
ak:'XXXXXX', // 公有云平台注册https://cloud.baidu.com/即可获得accessKey,
file:"xxx.mp4"
});
支持使用其他功能:
- 支持直播(flv、hls、WebRTC)、点播(mp4、flv、hls、ts)播放
- 支持封面设置、画中画、打点及缩略图、截图等基础功能设置