livePlayer.vue

<template>
    <div class="videoWrap">
        <div v-show="platform==1" class="video-box">
            <canvas class="box" id="canvasVideo"></canvas>
        </div>
        <div v-show="platform==2" class="video-box">
            <div class="box" id="my-video"></div>
        </div>
        
        <!-- <div class="tour-btns" v-else>
            <van-button block @click="navBack" type="primary">查看其他监控点</van-button>
        </div> -->
    </div>
</template>
<script>
import { defineComponent,reactive,toRefs} from 'vue'
import { Toast} from 'vant';
import EZUIKit from 'ezuikit-js'
import SLPlayer from '@/static/js/slplayer'
import tourApi from '@/api';
export default defineComponent({
    props: {
        params: Object
    },
    data() {
        return {
            palyUrl: '',
            player: '',
            playerIndex: 0,
            playerEz: '',
        }
    },
    methods: {
        createPlayer(row) {
            this.playerIndex++;
            let that = this;
            that.Module = {
                /* ************************************ */
                // 定义视频画布
                canvas: document.getElementById("canvasVideo"),
                /* ************************************ */
                // 设置相应的事件回调
                onStart: function() {
                    console.log("onStart...")
                },
                onEnd: function() {
                    console.log("onEnd...")
                },
                onError: function(code, err) {
                    alert('error: ', code, err)
                    console.log('error: ', code, err);
                },
                onVideoStart: function() {
                    console.log('onVideoStart。。。');
                },
                // 录像回放中返回时间刻度
                onPlayTime: function(ts) {
                    if (ts == 0) return;
                    var date = new Date(ts * 1000); //如果date为10位不需要乘1000
                    var Y = date.getFullYear() + '-';
                    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                    var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
                    var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                    var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
                    var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
                    var timestamp = Y + M + D + h + m + s;
                }
            }
            SLPlayer(that.Module).then(function(obj) {
                that.loading = false
                that.player = obj;
                setTimeout(() => {
                    that.player.start(row);
                    Toast.clear();
                }, 1000)
            });

        },
        playerVideo(data) {
            this.palyUrl = data.liveAddress;
            let atoken = data.accessToken;
            // 拾联视频
            if (this.platform == 1) {
                // 清除萤石云视频
                if (this.playerEz) {
                    let canvasVideo = document.getElementById('my-video')
                    canvasVideo.innerHTML = ''
                }
                if (this.playerIndex > 0) {
                    // 暂停上次播放并重新开始新的视频
                    this.player.stop();
                    setTimeout(() => {
                        this.player.start(this.palyUrl);
                        Toast.clear();
                    }, 100)
                } else {
                    this.createPlayer(this.palyUrl);
                }
            } else {
                // 萤石云视频
                // 清除拾联视频
                if (this.player) {
                    this.player.stop();
                }
                if (this.playerEz) {
                    let canvasVideo = document.getElementById('my-video')
                    canvasVideo.innerHTML = ''
                }
                // 开始萤石云视频
                this.playerEz = new EZUIKit.EZUIKitPlayer({
                    id: "my-video", // 视频容器ID
                    accessToken: atoken,
                    url: this.palyUrl,
                    template: 'mobileLive', //simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
                    autoplay: true,
                    //footer: ['hd', 'fullScreen'],
                    width: window.innerWidth,
                    height:window.innerWidth*1080/1920,
                });
                Toast.clear();
            }

        },
        loadTourVideo() {
            Toast.loading({
               duration:0, 
               message: '加载中···',
               forbidClick: true,
            });
            let {channelid,platform} = this.params;
            tourApi.getLiveAddress({ id: channelid, protocol:platform == 2 ? 1 : 2, quality: 1 }).then(res => {
                var data = res.data;
                if (data.code != 200) {
                    Toast.fail({
                        message: data.msg,
                        onClose() {
                            wx.miniProgram.navigateBack()
                        }
                    });
                } else {
                    this.playerVideo(data.data);
                }
            })
        }
    },
    created() {
        this.loadTourVideo();
    },

    destroyed(){
       
    },
    setup(props, context) {
        const params = reactive(props.params);
        return {
           ...toRefs(params)
        }
    }
})
</script>
<style scoped lang="less">
.videoWrap {
    position: relative;
    width: 100%;
    .video-box {
        position: relative;
        .box {
            position: relative;
            width: 100%;
            min-height: 420px;
            background: #000;
        }
    }
    :deep(.head-message),:deep(.live-ptz-title){
        display: none!important;
    }
    :deep(.mobile-ez-ptz-container){
        padding-top:20px;
    }
    /*,/deep/.mobile-ez-ptz-container{
        display: none!important;
    }*/
}

</style>