vue2使用ezuikit-js播放萤石视频
需求：需要在大屏上播放萤石视频，用到官方的ezuikit-js插件实现，并实现视频播放切换功能。有个问题至今没有解决，就是萤石视频的宽高是固定的，不会根据大屏缩放进行自适应。我这边做了简单的刷新自适应。
1.下载ezuikit-js
我在这下载的是0.7.2版本，最新版已经到8+，但是下载后运行报错了，可能不适配vue2，稳点就下载这个版本就行
ezuikit-js - npm
npm install ezuikit-js@0.7.2 --save2.效果如下
token和url都是官网拷贝的，所以播放不了，项目中改为有效果的token即可
3.主要代码讲解
首先肯定是引入
我们使用第二种引入即可
// >= v8.1.2 ESM
import { EZUIKitPlayer } from "ezuikit-js";
// < v8.1.2
import EZUIKit from "ezuikit-js";主要方法：
player.play();播放
player.stop();停止播放
player.openSound();停止声音
player.closeSound();关闭声音
player.fullScreen();全屏
player.cancelFullScreen();关闭全屏
player.destroy()销毁视频
player.changePlayUrl({})切换视频
视频播放主要就是如下代码，env一般不设置， template: 'pcLive',可以设置视频最底部的操作栏，this.$refs.videoContainer就是获取父级的盒子的宽高之后每次刷新页面都根据父级的宽高设置视频的宽高
<div class="video-box" ref="videoContainer">
<div id="video-container"></div>
</div>
init() {
if (player) {
this.destroy();
}
const findItms = this.videos.find((item) => item.id === this.videoSelect);
const container = this.$refs.videoContainer;
console.log(container.clientWidth, container.clientHeight, '最大值和最小值');
player = new EZUIKit.EZUIKitPlayer({
id: 'video-container', // 视频容器ID
accessToken: findItms.accessToken,
url: findItms.address,
// simple: 极简版; pcLive: pc直播; pcRec: pc回放; mobileLive: 移动端直播; mobileRec: 移动端回放;security: 安防版; voice: 语音版;
template: 'pcLive',
// plugin: ["talk"], // 加载插件，talk-对讲
width: container.clientWidth,
height: container.clientHeight,
handleError: (error) => {
console.error('handleError', error);
},
// language: "en", // zh | en
// staticPath: "/ezuikit_static", // 如果想使用本地静态资源，请复制根目录下ezuikit_static 到当前目录下， 然后设置该值
env: {
// https://open.ys7.com/help/1772?h=domain
// domain默认是 https://open.ys7.com, 如果是私有化部署或海外的环境，请配置对应的domain
// The default domain is https://open.ys7.com If it is a private deployment or overseas (outside of China) environment, please configure the corresponding domain
domain: 'https://open.ys7.com'
}
});
window.player = player;
},
.video-box {
width: 30vw;
height: 30vh;
}3.1效果如下
3.2切换视频
只需要使用changePlayUrl方法之后传token和地址就可以了
changeVideo(val) {
console.log(val, '-----');
let options = this.videos.find((item) => item.id == val);
player
.changePlayUrl({
// minHeight: 100, // 视频最小高度，单位为px
accessToken: options.accessToken, //accessToken 的值为你在莹石云平台监控地址的token
url: options.address
})
.then(() => {
console.log('切换成功');
});
},4.完整代码
<template>
<div class="hello-ezuikit-js">
<el-select
style="margin: 30px 0px"
v-model="videoSelect"
:teleported="false"
popper-class="popperClass"
placeholder="请选择"
size="mini"
@change="changeVideo"
>
<el-option v-for="(item, index) in videos" :key="item.index" :label="item.name" :value="item.id"> </el-option>
</el-select>
<div class="video-box" ref="videoContainer">
<div id="video-container"></div>
</div>
<div>
<button v-on:click="init">初始化视频</button>
<button v-on:click="stop">停止视频</button>
<button v-on:click="play">开始播放</button>
</div>
</div>
</template>
<script>
import EZUIKit from 'ezuikit-js';
var player = null;
export default {
name: 'HelloWorld',
props: {
msg: String
},
data() {
return {
videoSelect: 1,
videos: [
{
id: 1,
accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
name: '视频11',
address: 'ezopen://open.ys7.com/BD3957004/1.live'
},
{
id: 2,
name: '视频12',
accessToken: 'at.1gskp9sk9b8pol288qw4f0ladj6ow00a-2obk8zrvgd-0icd73x',
address: 'ezopen://open.ys7.com/BC7900686/1.hd.live'
}
]
};
},
mounted: () => {
console.group('mounted 组件挂载完毕状态===============》');
},
methods: {
init() {
if (player) {
this.destroy();
}
const findItms = this.videos.find((item) => item.id === this.videoSelect);
const container = this.$refs.videoContainer;
console.log(container.clientWidth, container.clientHeight, '最大值和最小值');
player = new EZUIKit.EZUIKitPlayer({
id: 'video-container', // 视频容器ID
accessToken: findItms.accessToken,
url: findItms.address,
// simple: 极简版; pcLive: pc直播; pcRec: pc回放; mobileLive: 移动端直播; mobileRec: 移动端回放;security: 安防版; voice: 语音版;
template: 'pcLive',
// plugin: ["talk"], // 加载插件，talk-对讲
width: container.clientWidth,
height: container.clientHeight,
handleError: (error) => {
console.error('handleError', error);
},
// language: "en", // zh | en
// staticPath: "/ezuikit_static", // 如果想使用本地静态资源，请复制根目录下ezuikit_static 到当前目录下， 然后设置该值
env: {
// https://open.ys7.com/help/1772?h=domain
// domain默认是 https://open.ys7.com, 如果是私有化部署或海外的环境，请配置对应的domain
// The default domain is https://open.ys7.com If it is a private deployment or overseas (outside of China) environment, please configure the corresponding domain
domain: 'https://open.ys7.com'
}
});
window.player = player;
},
play() {
var playPromise = player.play();
playPromise.then((data) => {
console.log('promise 获取 数据', data);
});
},
stop() {
var stopPromise = player.stop();
stopPromise.then((data) => {
console.log('promise 获取 数据', data);
});
},
changeVideo(val) {
console.log(val, '-----');
let options = this.videos.find((item) => item.id == val);
player
.changePlayUrl({
// minHeight: 100, // 视频最小高度，单位为px
accessToken: options.accessToken, //accessToken 的值为你在莹石云平台监控地址的token
url: options.address
})
.then(() => {
console.log('切换成功');
});
},
destroy() {
var destroyPromise = player.destroy();
destroyPromise.then((data) => {
console.log('promise 获取 数据', data);
});
player = null;
}
}
};
</script>
<style lang="scss" scoped>
.hello-ezuikit-js {
height: 700px;
width: 100%;
}
.video-box {
width: 30vw;
height: 30vh;
}
</style>
文章到此结束，希望对你有所帮助~