<template>
    <div style="height: 560px">
        <video id="videoElement" muted="muted"></video>
    </div>
</template>
<script>
export default {
    props: {
        channelCode: {
            type: String,
        }
    },
    data() {
        return {
            flvPlayer: null,
            params: {
                json: {
                    data: {
                        channelId: "",
                        streamType: "2",
                        type: "flv",
                    },
                },
                code: "video_realtime",
            },
        };
    },
    created() {
        const scriptInfo = document.createElement("script");
        scriptInfo.setAttribute("data-callType", "callScript");
        scriptInfo.src = "https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js";
        document.head.appendChild(scriptInfo);
    },
    mounted() {
        let that = this;
        that.params.json.data.channelId = that.channelCode;
        that.$API.am.video.item.req(that.params).then((res) => {
            that.url = res.url;
            if (flvjs.isSupported()) {
                let videoElement = document.getElementById("videoElement");
                that.flvPlayer = flvjs.createPlayer({
                    type: "flv",
                    url: res.url,
                });
                that.flvPlayer.attachMediaElement(videoElement);
                that.flvPlayer.load();
                that.flvPlayer.play();
            }
        });
    },
    unmounted () {
        debugger;
         let that = this;
        that.flvPlayer.pause();
        that.flvPlayer.unload();
        that.flvPlayer.detachMediaElement();
        that.flvPlayer.destroy();
        that.flvPlayer = null;
    },
};
</script>
