在vue项目中引用萤石云播放器插件
在vue项目中引用萤石云播放插件
·
在vue项目中引用萤石云播放器插件
1. 萤石云官方开发文档: https://open.ys7.com/help/31
2. 登录官方网站:https://open.ys7.com/cn/s/index
- 安装萤石云播放插件
npm install ezuikit-js
- 在vue项目的comenpnent组件文件夹中创建ezuikit-player/index.vue 文件;
<template>
<div class="hello-ezuikit-js">
<div id="video-container" :style="{'width': boxWidth}"></div>
</div>
</template>
<script>
import axios from 'axios'
// 请先查看package.json是否有"ezuikit-js": "^0.5.2", 没有请复制"ezuikit-js": "^0.5.2",到dependencies下,npm install 重新安装依赖 或者 npm install ezuikit-js
import EZUIKit from "ezuikit-js";
var player = null; // 播放器注册
export default {
name: "ezuikit",
props: {
msg: String,
videoUrl:{
type: String,
default:''
},
width:{
type: String,
default: '100%'
},
height:{
type: String,
default: '100%'
}
},
data () {
return {
accessToken:'',
cuIndex: 0,
boxWidth: '100%',
boxHeight: '100%'
}
},
watch:{
videoUrl:{
handler(val){
// alert(val);
if(val == '设备离线'){
if(player){
player.stop();
// 切换为直播
player.play({
url: 'ezopen://open.ys7.com/D54281872/1.cloud.rec'
})
}
}else{
if(player){
player.stop();
// 切换为直播
player.play({
url: val
})
}
}
},
deep: true,
immediate: true
},
width:{
handler(newVal){
if(newVal){
this.boxWidth = newVal
}
}
},
height:{
handler(newVal){
if(newVal){
this.boxHeight = newVal
}
}
}
},
mounted(){
console.group("mounted 组件挂载完毕状态===============》");
this.getDeviceToken();// 获取token
},
methods: {
// 获取token
getDeviceToken(){
const data = new FormData()
data.append( 'appKey', 'xxxxxxxxxxxxxxxxxxxxx' )
data.append( 'appSecret', 'xxxxxxxxxxxxxxxxxxxxxxx' )
axios({
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
method: 'post',
url: 'https://open.ys7.com/api/lapp/token/get',
data: data
}).then(res=>{
console.log(res)
if(res.data.code == '200'){
this.accessToken = res.data.data.accessToken;
this.StructureEZUIKitPlayer();
}
})
.catch(err=>{
console.log(res)
})
},
StructureEZUIKitPlayer(){
// 渲染视频播放
player = new EZUIKit.EZUIKitPlayer({
id: 'video-container', // 视频容器ID
accessToken: this.accessToken,
url: 'ezopen://open.ys7.com/D54281872/1.cloud.rec', // 初始化写死一个离线或者找不到的设备,避免初始化无法创建播放器;
template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题;
// plugin: ['talk'],
header: ["capturePicture", "save"], // 如果templete参数不为simple,该字段将被覆盖 // 加载插件,talk-对讲
footer: ['hd', 'fullScreen'], // 如果template参数不为simple,该字段将被覆盖
width: this.width ? this.width : this.boxWidth,
height: this.height ? this.height : this.boxHeight,
fullScreenCallBack: data => console.log("全屏回调", data), // 如果template参数不为simple, 无法获取
});
},
change() {
player.stop();
// 切换为直播
// player.play({
// url:"ezopen://open.ys7.com/244640009/1.live"
// })
// setTimeout(()=>{
// player.play({
// url:"ezopen://open.ys7.com/244640009/1.live"
// })
// },1000)
},
},
beforeDestroy(){
player.stop();
},
};
</script>
- 组件中使用到的appKey 和 appSecret 需要登录官网去找到这两个值拿来请求
这样就完成了,页面直接引入这个插件并且传入播放地址,同时也可以按需求设置播放器的宽高就可以使用了!
更多推荐
已为社区贡献6条内容
所有评论(0)