两者皆为轻应用的实现
1.下载
// 萤石云
"ezuikit-js": "^0.3.0",
// 乐橙云 现无npm下载 到乐橙云官网下载相关内容 vue项目可找技术支持拿demo
2.引入
// 萤石云
import EZUIKit from 'ezuikit-js';
// 乐橙云 public-->index.html下引入
<script src="/imouplayer.js"></script>
3.使用
// new乐橙云视频对象
export const newImouPlayer = ({ id,url , kitToken, height=380, autoplay=false }) => {
// 添加DOM容器
let player = new ImouPlayer(id);
// 播放器初始化
player.setup({
src: [{
url,
kitToken
}], // 播放地址
poster: '', // 封面图url
autoplay: play,
controls, // 是否展示控制栏
height
});
return player
}
// new萤石云视频对象
import EZUIKit from 'ezuikit-js'; // 萤石云
export const newEZUIKitPlayer = ({id, accessToken, url, template='simple', height='360 ', width='100%', autoplay=false}) => {
return new EZUIKit.EZUIKitPlayer({
autoplay,
id,
accessToken,
url,
template, // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版;
audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
height,
width
});
}
methods: {
videoclick(e,id,item) {
this.playerList[id].play() // 点击播放
e.target.style.display = "none" // 图标隐藏
},
// 点击历史回放默认先显示当前时间预览 选择时间后再回放历史录像
clickHistory (item) {
this.historyTime = '' // 再次点击时间置空
this.current = item
this.open = true
setTimeout(()=>{
// 视频对象存在并且 上次此次都是萤石云视频 切换地址播放
if (this.playerHistory!=null & this.oldItem.apiType == 2 & item.apiType == 2) {
this.playerHistory.stop().then(()=>{
this.playerHistory.play(this.current.liveUrl);
});
return
}
// 萤石云视频没有销毁事件 导致萤石云切换到大华时 萤石云视频还占位 所以需要把萤石云视频暂停播放并隐藏
if(this.playerHistory!=null & this.oldItem.apiType == 2 & item.apiType == 1) {
const el = document.querySelector('#EZUIKitPlayer-playerHistory')
this.playerHistory.stop()
el.style.display = 'none'
}
// 创建新的视频对象
if(item.apiType == 1) {
this.playerHistory = newImouPlayer({
id: `#playerHistory`,
url:`imou://open.lechange.com/${item.deviceSn}/${item.channelId}/1?streamId=1`,
kitToken: item.kitToken,
autoplay: true
})
}else if(item.apiType == 2){
this.playerHistory = newEZUIKitPlayer({
id: `playerHistory`,
accessToken: item.accessToken,
url: item.liveUrl,
autoplay: true
})
}
this.oldItem = item
},500)
},
handleClose() {
this.open = false
this.current.apiType == 1 ? this.playerHistory.destroy() : this.playerHistory.stop()// 销毁视频对象
},
// 选择时间
historyChange(date) {
let startTime = formatDay(new Date()) + ' ' + date[0]
let stopTime = formatDay(new Date()) + ' ' + date[1]
setTimeout(async ()=>{
if(this.current.apiType == 1) {
// 清除上一次
if (this.playerHistory) { this.playerHistory.destroy() }
this.playerHistory = newImouPlayer({
id: `#playerHistory`,
url: `imou://open.lechange.com/${this.current.deviceSn}/${this.current.channelId}/2?streamId=1&recordType=localRecord&beginTime=${startTime}&endTime=${stopTime}`,
kitToken: this.current.kitToken
})
}else if(this.current.apiType == 2){
const { data } = await getPlayBack({
deviceSn: this.current.deviceSn,
channelId: this.current.channelId,
startTime,
stopTime
})
// 替换播放地址
this.playerHistory.stop().then(()=>{
this.playerHistory.play({
url: data.liveUrl,
accessToken: data.accessToken
});
});
}
},500)
},
async getVideoList() {
const { data } = await getVideoList({projectId: this.projectId})
this.videoList = data
setTimeout(()=>{
data.forEach(item => {
if(item.apiType == 1) {// 1:乐橙云 2:萤石云
// 把设备列表new出来的视频对象存到一起
this.playerList[`player${item.deviceSn + item.channelId}`] = newImouPlayer({
id: `#player${item.deviceSn + item.channelId}`,
url: `imou://open.lechange.com/${item.deviceSn}/${item.channelId}/1?streamId=1`,
kitToken: item.kitToken
})
}else if(item.apiType == 2){
this.playerList[`player${item.deviceSn + item.channelId}`] = newEZUIKitPlayer({
id: `player${item.deviceSn + item.channelId}`,
accessToken: item.accessToken,
url: item.liveUrl,
})
}
})
}, 500)
},
},