<script setup>
import { reactive, onMounted } from 'vue';
const state = reactive({
    videoUrl: "wss://117.64.249.15:28080/live/Outj6pqykdjFR_Profile_1.flv?expired=20241208093628",
    radioList: [// 选择分屏
        { label: "单分屏", value: 1 },
        { label: "四分屏", value: 4 },
        { label: "九分屏", value: 9 },
    ],
    config: {
        hasAudio: true,
        isLive: true,
        MSE: false,
        WCS: false
    },
    isPlay: false,
})

const onUse = (type) => {
    if (type == 'hasAudio') {
        state.config.hasAudio = !state.config.hasAudio
    } else {
        state.config.MSE = false
        state.config.WCS = false
        if (type == 'MSE') state.config.MSE = true
        if (type == 'WCS') state.config.WCS = true
    }
    if (state.isPlay) {
        state.onDestroy().then(() => {
            state.playCreate();
            state.onPlayer()
        });
    }
}
const setFullscreen = () => {
    state.playerInfo.setFullscreen(true)
}
const onPause = () => {
    state.playerInfo.pause()
}
const onMute = () => {
    state.playerInfo.setMute(true)
}
const onPlayer = () => {
    state.isPlay = true
    setTimeout((url) => {
        //url=state.videoUrl
        state.playerInfo && state.playerInfo.play(url).then(() => {
        }).catch((e) => {
            console.error(e);
        });
    }, 0, state.videoUrl)
}
const onPlayerPlayback = () => {
    state.onDestroy().then(() => {
        state.playCreate();
        state.config.isLive = false
        setTimeout((url) => {
            state.playerInfo && state.playerInfo.play(url).then(() => {

            }).catch((e) => {
                console.error(e);
            });
        }, 0, state.videoUrl)
    });

}
const onStop = () => {
    state.isPlay = false
    state.onDestroy().then(() => {
        state.playCreate();
    });
}
const onDestroy = () => {
    let _state = state
    return new Promise((resolve, reject) => {
        if (state.playerInfo) {
            state.playerInfo.destroy()
            state.playerInfo = null
        }
        setTimeout(() => {
            resolve();
        }, 100);
    })
}
const onReplay = () => {
    state.onDestroy().then(() => {
        state.playCreate();
        state.onPlayer()
    });
}
const playCreate = () => {
    var container = document.getElementById('player_box1');
    var easyplayer = new EasyPlayerPro(container, {
        isLive: state.config.isLive,//默认 true
        bufferTime: 0.2, // 缓存时长
        stretch: false,
        MSE: state.config.MSE,
        WCS: state.config.WCS,
        hasAudio: state.config.hasAudio,
        watermark: { text: { content: 'easyplayer-pro' }, right: 10, top: 10 },
    });

    easyplayer.on("fullscreen", function (flag) {
        console.log('is fullscreen', id, flag)
    })
    easyplayer.on('playbackRate', (rate) => {
        easyplayer.setRate(rate);
    })

    easyplayer.on('playbackSeek', (data) => {
        console.log('playbackSeek', data)
    })
    state.playerInfo = easyplayer
}
onMounted(() => { playCreate() })
</script>

<template>
    <div>
        视频测试

    </div>
    <div>
        Version:1.0 StartHTML:0000000128 EndHTML:0000006179 StartFragment:0000000128 EndFragment:0000006179
        SourceURL:about:blank
        <br>
        <h2>EasyPlayerPro案例演示</h2>
        <br>
        <div :class="['player_container', 'player_container_1']">
            <div class="player_item">
                <div class="player_box" id="player_box1">

                </div>
            </div>
        </div>
        <br>
        <div class="df">
            <div>
                <input @click="onUse('hasAudio')" type="checkbox" :checked="state.config.hasAudio" /><span
                    @click="onUse('hasAudio')">音频</span>
            </div>

        </div>
        <div class="df">
            <div>播放地址：</div><input class="inputs" v-model="state.videoUrl">
        </div>
        <div class="df">
            <div class="radio-item" @click="onReplay()" v-if="state.isPlay">重播</div>
            <div class="radio-item" @click="onPlayer()" v-if="!state.isPlay">播放</div>
            <div class="radio-item" @click="onPlayerPlayback()" v-if="!state.isPlay">回放</div>
            <div class="radio-item" @click="onPause()">暂停</div>
            <div class="radio-item" @click="onMute()">静音</div>
            <div class="radio-item" @click="setFullscreen()">全屏</div>
            <div class="radio-item" @click="onStop()" v-if="state.isPlay">注销</div>
        </div>

    </div>
</template>

<style>
/* color: #07baf4; */
* {
    margin: 0;
    padding: 0;
}

p {
    line-height: 24px;
}

#app {
    padding-top: 10px;
    margin: auto;
    max-width: 1200px;
}

.radio-container {
    padding: 10px 0;
}

.radio-item {
    cursor: pointer;
    display: inline-block;
    padding: 6px 12px;
    margin-right: 15px;
    border-radius: 4px;
    border: 1px #ccc solid;
}

.radio-active {
    color: #fff;
    background-color: #07baf4;
    border-color: #07baf4;
}

.player_container {
    display: grid;
}

.player_container_1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.player_item {
    position: relative;
    padding-bottom: 56%;
    background-color: #000;
    border: 1px #fff solid;
}

.inputs {
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 36px;
    line-height: 36px;
    outline: none;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;
    max-width: 600px;
    margin-right: 16px;
}

.player_box {
    height: 100%;

    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.df {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.df span {
    margin-left: 4px;
}

.df form {
    margin-right: 4px;
}
</style>

