需求：需要在大屏上播放螢石視頻，用到官方的ezuikit-js插件實現，并實現視頻播放切換功能。有個問題至今沒有解決，就是螢石視頻的寬高是固定的，不會根據大屏縮放進行自適應。我這邊做了簡單的刷新自適應。
1.下載ezuikit-js
我在這下載的是0.7.2版本，最新版已經到8+，但是下載后運行報錯了，可能不適配vue2，穩點就下載這個版本就行
ezuikit-js - npm
npm install ezuikit-js@0.7.2 --save?2.效果如下
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', // 視頻容器IDaccessToken: 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 domaindomain: '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, // 視頻最小高度，單位為pxaccessToken: options.accessToken, //accessToken 的值為你在瑩石云平臺監控地址的tokenurl: options.address}).then(() => {console.log('切換成功');});},4.完整代碼
<template><div class="hello-ezuikit-js"><el-selectstyle="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', // 視頻容器IDaccessToken: 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 domaindomain: '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, // 視頻最小高度，單位為pxaccessToken: options.accessToken, //accessToken 的值為你在瑩石云平臺監控地址的tokenurl: 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>
文章到此結束，希望對你有所幫助~
)
)