v3-lab-xcx-videoPlayer/src/components/H5PlayerVideo.vue

<template>
    <div class="H5PlayerVideo">
        <div :id="videoData.id" :ref="videoData.id"></div>
        <p class="full-screen-button" v-if="!fullScreenType" @click="fullScreen"></p>
        <p class="full-failed-button" v-if="fullScreenType" @click="outFullScreen"></p>
    </div>
</template>

<script>
    export default {
        name: 'H5PlayerVideo',
        props: {
            videoProps: {}
        },
        data() {
            return {
                fullScreenType:false,
                videoCover: localStorage.getItem('fileBrowseEnvironment') + localStorage.getItem('videoCover'),
                videoData: {},
            }
        },
        created() {
            this.$set(this, 'videoData', {
                id: 'video_' + this.generateRandomString(),
                width: this.videoProps.width ? this.videoProps.width : 600,
                height: this.videoProps.height ? this.videoProps.height : 338,
                url: this.videoProps.url
            })
        },
        mounted() {
            this.$nextTick(() => {
                this.initH5Player(1)
                this.initPlayer(this.videoData.url, 0)
            })
        },
        methods: {
            //全屏
            fullScreen() {
                let self = this;
                this.myPlugin.JS_FullScreenDisplay(true).then(
                    (res) => {
                        console.info('JS_FullScreenDisplay success');
                        // do you want...
                    },
                    (err) => {
                        console.info('JS_FullScreenDisplay failed');
                        // do you want...
                    }
                );
                self.$set(self,'fullScreenType',true);
            },
            //退出全屏
            outFullScreen() {
                let self = this;
                this.myPlugin.JS_FullScreenDisplay(false).then(
                    (res) => {
                        console.info('JS_FullScreenDisplay success');
                        // do you want...
                    },
                    (err) => {
                        console.info('JS_FullScreenDisplay failed');
                        // do you want...
                    }
                );
                self.$set(self,'fullScreenType',false);
            },
            initH5Player(split) {
                this.myPlugin = new window.JSPlugin({
                    szId: this.videoData.id, //需要英文字母开头，唯一性，必填
                    szBasePath: '/h5player/', // 必填,与h5player.min.js的引用目录一致 填写的是pulblic下的路径！！！
                    bSupporDoubleClickFull: true,//是否支持双击全屏，默认true
                    openDebug: true,
                    oStyle: {
                        borderSelect: '#000'
                    },
                    // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
                    iWidth: this.videoData.width,
                    iHeight: this.videoData.height,
                    // 分屏播放，默认最大分屏4*4
                    iMaxSplit: split,
                    iCurrentSplit: split
                })
                let iWndNum = 1;
                let InterruptTime = 5;
                this.myPlugin.JS_SetInterruptTime(iWndNum, InterruptTime).then(
                    () => {
                        // console.info('JS_SetInterruptTime success');
                        // do you want...
                    },
                    (err) => {
                        // console.info('JS_SetInterruptTime failed');
                        // do you want...
                    }
                );
                // 事件回调绑定
                this.myPlugin.JS_SetWindowControlCallback({
                    windowEventSelect: function (iWndIndex) {  //插件选中窗口回调
                        // console.log('windowSelect callback: ', iWndIndex)
                    },
                    pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {  //插件错误回调
                        // console.log('pluginError callback: ', iWndIndex, iErrorCode, oError)
                    },
                    windowEventOver: function (iWndIndex) {  //鼠标移过回调
                        //console.log(iWndIndex);
                    },
                    windowEventOut: function (iWndIndex) {  //鼠标移出回调
                        //console.log(iWndIndex);
                    },
                    windowEventUp: function (iWndIndex) {  //鼠标mouseup事件回调
                        //console.log(iWndIndex);
                    },
                    windowFullCcreenChange: function (bFull) {  //全屏切换回调
                        // console.log('fullScreen callback: ', bFull)
                    },
                    firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {  //首帧显示回调
                        // console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight)
                    },
                    performanceLack: function () {  //性能不足回调
                        // console.log('performanceLack callback: ')
                    }
                })
            },
            initPlayer(url, index) {
                this.myPlugin.JS_Play(url,
                    {
                        playURL: url, // 流媒体播放时必传
                        mode: 0 // 解码类型：0=普通模式; 1=高级模式 默认为0
                        // ...
                    },
                    index //当前窗口下标
                ).then(
                    () => {
                        console.info('JS_Play success')
                        // do you want...
                    },
                    (err) => {
                        console.info('JS_Play failed:', err)
                        // do you want...
                    }
                )
            },
            //生成随机ID
            generateRandomString() {
                let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
                let randomString = ''
                for (let i = 0; i < 24; i++) {
                    let randomIndex = Math.floor(Math.random() * chars.length)
                    randomString += chars.charAt(randomIndex)
                }
                return randomString
            },
            videoOff() {
                this.myPlugin.JS_StopRealPlayAll().then(
                    () => {
                        console.info('JS_StopRealPlayAll success')
                        // do you want...
                    },
                    (err) => {
                        console.info('JS_StopRealPlayAll failed')
                        // do you want...
                    }
                )
            }
        },
        beforeDestroy() {
            let self = this
            self.videoOff()
        }
    }
</script>

<style scoped>
    .H5PlayerVideo {
        margin: 0;
        padding: 0;
        display: inline-block;
        position: relative;
    }

    .full-screen-button {
        background: url("../assets/icon_0.png");
        background-size: 100%;
        position: absolute;
        font-size: 20px;
        height: 30px;
        width: 30px;
        line-height: 30px;
        text-align: center;
        top: 5px;
        right: 5px;
        z-index: 999;
        cursor: pointer;
    }
    .full-failed-button {
        background: url("../assets/icon_1.png");
        background-size: 100%;
        position: fixed;
        font-size: 20px;
        height: 30px;
        width: 30px;
        line-height: 30px;
        text-align: center;
        bottom: 10px;
        right: 10px;
        z-index: 999999;
        cursor: pointer;
    }

    * {
        margin: 0;
        padding: 0;
    }
</style>