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

1. 安装萤石云播放插件

npm install ezuikit-js

2. 在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>

3. 组件中使用到的appKey 和 appSecret 需要登录官网去找到这两个值拿来请求
   
   这样就完成了，页面直接引入这个插件并且传入播放地址，同时也可以按需求设置播放器的宽高就可以使用了！