<!DOCTYPE html>
<html lang="en">
<div id="CloudPlayback-container"></div>
<div id="CloudPlayback-document-container"></div>
<head>
<script src="CloudPlayback.js"></script>
<script>
const cloudPlayback = new CloudPlayback({
container: document.getElementById('CloudPlayback-container'),
documentContainer: document.getElementById('CloudPlayback-document-container'),
controllerContainer: document.getElementById('CloudPlayback-controller-container'),
recordId:'1519216100695347288',
passCode: '',
userId: '222',
nickName: '111',
preload: true, //视频预加载
isIframeShow:true, //文档开关展示
theme: "#01beff", //主题色
pluginOptions: { // 预加载hls
hls: {
enableWorker: false,
isLive: false
},
},
});
cloudPlayback.init();
</script>
</head>
<body>
<div id="CloudPlayback-container"></div>
<div id="CloudPlayback-document-container"></div>
</body>
# 最新稳定版本
npm install CloudPlayback
import * as CloudPlayback from 'CloudPlayback'
const cloudPlayback = CloudPlayback.init({
// ...
})
暂无示例
#功能参数
名称 | 默认值 | 描述 |
---|---|---|
container | document.querySelector('.dplayer') | 播放器容器元素 |
theme | '#b7daff' | 主题色 |
loop | false | 视频循环播放 |
lang | navigator.language.toLowerCase() | 可选值: 'en', 'zh-cn', 'zh-tw' |
hotkey | true | 开启热键,支持快进、快退、音量控制、播放暂停 |
airplay | true | 在 Safari 中开启 AirPlay |
preload | 'auto' | 视频预加载,可选值: 'none', 'metadata', 'auto' |
volume | 0.7 | 默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效 |
playbackSpeed | [0.5, 0.75, 1, 1.25, 1.5, 2] | 可选的播放速率,可以设置成自定义的数组 |
video | - | 视频信息 |
video.quality | - | 见#清晰度切换 |
video.defaultQuality | - | 见#清晰度切换 |
video.url | - | 视频链接 |
video.pic | - | 视频封面 |
recordId | - | 录制件ID |
passCode | - | 用户密码 |
userId | - | 用户ID |
nickName | - | 用户名 |
-
cloudPlayback.play(): 播放视频
-
cloudPlayback.pause(): 暂停视频
-
cloudPlayback.seek(time: number): 跳转到特定时间
-
cloudPlayback.toggle(): 切换播放和暂停
-
cloudPlayback.on(event: string, handler: function): 绑定视频和播放器事件
-
cloudPlayback.switchQuality(HD): 切换清晰度
-
cloudPlayback.destroy(): 销毁播放器
-
cloudPlayback.speed(rate: number): 设置视频速度
-
cloudPlayback.volume(percentage: number, nostorage: boolean, nonotice: boolean): 设置视频音量
-
cloudPlayback.video: 原生 video
-
cloudPlayback.video.currentTime: 返回视频当前播放时间
-
cloudPlayback.video.duration: 返回视频总时间
-
cloudPlayback.video.paused: 返回视频是否暂停
支持大多数原生 video 接口(opens new window)
-
cloudPlayback.fullScreen.request(): 进入全屏
-
cloudPlayback.fullScreen.cancel(): 退出全屏
-
cloudPlayback.fullScreen.changeAudio(): 切换音视频 #事件绑定
-
cloudPlayback.on(event, handler)
cloudPlayback.on('ended', function () {
console.log('player ended');
});
###视频事件 canplay:初始化完成 ended:结束 error:视频报错 pause:暂停 play:开始播放 playing:播放回调 seeked:跳转结束 seeking:跳转中 fullscreen:全屏 fullscreen_cancel:退出全屏
'chatList':聊天信息
cmd: "1701" // 聊天:1701
content: {
body: "1、现在开始录制,2022-04-27 09:26" // 聊天内容
headImgUrl: "" //头像图标
imgState: false //是否有图
imgUrl: "" //图片
name: "Chrome主播" //用户名
quote: {} //问答
role: "6" //角色
type: "normal"
}
fromCid: "U00000001" // 来源cid
fromDev: "web" //来源
fromUid: "1519123907150352450111111" //发出id
id: "62689bd9b95b466bfd2615f1" // 消息id
mid: "gbe5x4DTATeyF4N1651022809176"
time: "1651022809678" //聊天信息时间
'loginInfo':登录信息
Remarks: 备注信息
m3u8_file_ids: 播放链接地址
nickName: 用户名字
passCode: 密码
playback_title: "录制件主題"
player_url: "https://casttest.263live.net/rFfsoa"
type: 有无密码 0没有 1有
'playBackSet':获取录制件设置
layout_chat: true //聊天室:启用/不启用
layout_doc: true //文档共享:启用/不启用
playback_summary: "" //内容介绍:
'playBackBackground':获取直播间UI信息
background: "" //回放背景
icon: "" // 页签
logo: "" //回放图标
'playBackTime':回放时间
endTime: 1651111787000 //结束时间
startTime: 1651111775000 //开始时间
'playBackFile':回放目录
cmd: "3001" //cmd标识 详情见文档cmd对应表
content: "" //内容
date: "02:22" //相对时间点
extension: "docx" //文档类型
fileId: "861df292a7be40f6b7f905959eee7dc1" //文档唯一标识
fileName: "二六三e-HR系统-员工自助操作手册V1.6" //文档名字
fileTitle: "二六三e-HR系统-员工自助操作手册V1.6.docx" //文档全称
host: "https://livetest.263cv.net/file/web/doc" //文档地址
id: "62689c5d7bfda64df4b791b2"
page: "1" //页码
pageId: ""
shareId: "62689c5d7bfda64df4b791b1"
timely: 0
ts: 1651022941426 //文档开始时间
type: "doc" //文档类型 doc:文档 web:白板
shareDocBl:文档开关状态
userError:录制件请求错误信息