
<template>
    <div class="uav-container">
        <div class="title">
            视频监控
        </div>
        <div v-show="isShowPlayer">
            <video
                class="TCPlayer-video-contaiiner"
                id="TCPlaeyrContainer"
                width="235px"
                height="178px"
                autoplay
                preload="auto"
                playsinline
                muted
                webkit-playsinline
            ></video>
        </div>

        <!-- <video id="flv-player" class="video-js vjs-default-skin" controls preload="auto" width="400" height="250" style="position:relative;left:10px;">
        </video> -->
        <!-- <EasyPlayer 
        style="width:900px;height:500px;"
        :videoUrl="'http://221.2.83.254:7012/live/37130100181328000001.flv'"
        :aspect="'16:9'"
        live
        :fluent="true"
        :autoplay="true"
        stretch
        ></EasyPlayer> -->

        <!-- <easy-player 
            video-url="http://221.2.83.254:7012/live/37130100181328000001.m3u8" 
            :live="true"
            :autoplay="true"
            style="width:400px;height:250px;"
        ></easy-player>		 -->
        
    </div>
</template>


<script lang="ts" setup>
import {ref,onMounted,onBeforeUnmount} from 'vue';
// import EasyPlayer from '@easydarwin/easyplayer'

const isShowPlayer = ref(false);

let player = null;

function handlerPlayVideo(item){

    isShowPlayer.value = true;

    if (player) {
        player.src("http://221.2.83.254:7012/live/37130100181328000001.m3u8");
    } else {
        player = TCPlayer("TCPlaeyrContainer", {});
        player.src("http://221.2.83.254:7012/live/37130100181328000001.m3u8");
    }


    // player = videojs('flv-player', {
    //   techOrder: ['flvjs', 'html5'], // 使用 flv.js 解码器
    //   autoplay: true,
    //   controls: true,
    //   muted: true,
    //   preload: 'auto',
    //   sources: [
    //     {
    //     //   src: 'http://221.2.83.254:7012/live/37130100181328000001.flv', // 替换为你的 FLV 视频流地址
    //     src:"http://60.213.14.14:8080/live/1.flv",
    //       type: 'video/x-flv',
    //     },
    //   ],
    // });

    // 检查浏览器是否支持 flv.js
    // if (flvjs.isSupported()) {
    //     alert(123);
    //   const flvPlayer = flvjs.createPlayer({
    //     type: 'flv',
    //     url: 'http://221.2.83.254:7012/live/37130100181328000001.flv', // 替换为你的 FLV 视频流地址
    //   },{
    //     enableStashBuffer: false, // 禁用默认缓冲
    //     isLive: true, // 启用实时流模式
    //     stashInitialSize: ,
    //   });

    //   flvPlayer.attachMediaElement(document.getElementById('flv-player'));
    //   flvPlayer.load();
    //   flvPlayer.play();
    // } else {
    //   console.error('FLV.js is not supported in this browser.');
    // }

}

onMounted(()=>{


    // document.getElementById("TCPlaeyrContainer").addEventListener('error', () => {
    //     console.error('Video playback error occurred.1111111111');
    //     player.reload()
    // //   if (retryCount < maxRetries) {
    // //     retryCount++;
    // //     console.log(`Retrying to load video... Attempt ${retryCount}`);
    // //     reloadVideo();
    // //   } else {
    // //     console.error('Max retries reached. Could not recover video playback.');
    // //     alert('视频播放失败，请稍后重试！');
    // //   }
    // });

    setTimeout(function(){
        handlerPlayVideo(123);
    },1000)

})

onBeforeUnmount(()=>{
    player.dispose();
    player = null;
})

</script>

<style type="less" scoped>

.uav-container{
    width: 418px;
    height: 300px;
    background:#041B36;
    position: relative;

    .title{
        width:100%;
        height:40px;
        background-image:url("/videosupervision/title.png");
        background-size:100% 100%;
        line-height:40px;
        text-indent:18px;
        font-size:18px;
        font-weight:bold;
        color:#fff;
    }
    .switch-button{
        float:right;
        margin-right:20px;
    }
    .uav-list-container{
        width:100%;
        height: calc( 100% - 60px);
        overflow:auto;
        padding:20px 20px;
        position:relative;
        z-index:999;
        .uav-empty{
            width:100%;
            height:100%;
            text-align:center;
            color:#999;
            img{
                width:120px;
                margin:40px 0px 18px 0px;
            }
        }
        .uav-item{
            width:100%;
            height:40px;
            padding:0px 15px;
            line-height:40px;
            color:#f1f1f1;
            display:flex;
            background:rgba(0,0,0,0.2);
            &:hover{
                background:rgba(0,0,0,0.4);
            }
            div{
                flex:1;
            }
            .position{
                max-width:30px;
                cursor:pointer;
            }
            .play{
                max-width:30px;
                cursor:pointer;
            }
        }
    }

    .TCPlayer-video-contaiiner{
        width: calc( 100% - 30px);
        height: calc( 100% - 70px);
        position:absolute;
        margin:15px;
        top:40px;
        right:0px;
        z-index:1000;
        background:#041B36;
        .video-contain {
            width: 100%;
            height: 100%;
        }
        
    }
    .close-video-button{
        position:absolute;
        top:40px;
        right:10px;
        background:rgba(0,0,0,0.3);
        z-index:100100;
        color:#fff;
        padding:10px;
        cursor:pointer;
        &:hover{
            color:#408eff;
        }
    }
}   
</style>