在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: {// 获取tokengetDeviceToken(){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', // 视频容器IDaccessToken: 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 需要登录官网去找到这两个值拿来请求

这样就完成了，页面直接引入这个插件并且传入播放地址，同时也可以按需求设置播放器的宽高就可以使用了！

在vue项目中引用萤石云播放器插件相关推荐

在vue项目中使用阿里云播放器
在官方文档中分为HTML5和Flash两种播放模式我用的是html5的播放模式,下面是阿里云官方文档阿里云播放器的使用说明_视频点播-阿里云帮助中心首先在index.html文件中引入 <l ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
在vue项目中引用vuex状态管理工具
在vue项目中引用vuex状态管理工具一.vuex是什么? 二.使用步骤 1.引入库 2.在main.js文件引入配置 3.配置store/index.js文件 4.获取state数据 5.获取ge ...
antvg2 环图轮播_在vue项目中引用Antv G2,以饼图为例讲解
我就废话不多说了,大家还是直接看代码吧~ npm install @antv/g2 --save template内容: js部分: //引入G2组件 import G2 from "@a ...
vue项目中 axios请求拦截器与取消pending请求功能 - 年少、 - 博客园
在开发vue项目中,请求是不可缺少的,在发送请求时常常需要统一处理一些请求头参数等设置与响应事件,这时利用请求拦截器再好不过. 这里以axios请求为例实现了设置统一请求头添加token, 其中to ...
在vue项目中引用element-ui时让el-input 获取焦点的方法
在制作项目的时候遇到一个需求,点击一个按钮弹出一个input输入框,并让输入框获得焦点,项目中引用了element-ui 在网上查找了很多方法, 但是在实际使用中发现了一个问题无论是使用$ref获取 ...
聊聊在Vue项目中使用Decorator装饰器
戳蓝字" Web前端严选 " 关注我们哦 ! 前言初衷: 前几天我在公司其它Vue项目中,发现了是用Decorator装饰器模式开发的,看起来整体代码还不错,于是就做了一下笔记分 ...
笔记：vue项目中引用百度地图，地图空白现象
最近在项目中使用百度离线地图,可是一切都正常完成的情况下.页面中的地图区域居然是显示空白的: 检查了好久,发现是自己的全局样式造成的: 解决:将全局样式中img标签的max-width和max-hei ...
vue 项目中引用并使用cdn上面的js文件
项目中,有一份配置数据需要不停地文件更新,之前放在项目中每次更新就要进行发版本,所以就把它放在cdn上,项目中通过cdn地址获取文件,每次需要更新数据时,直接更新cdn上面的文件即可,这样就算多个项目 ...

在vue项目中引用萤石云播放器插件

在vue项目中引用萤石云播放器插件

在vue项目中引用萤石云播放器插件相关推荐

最新文章

热门文章