<template>

  <a-modal v-model:visible="vdata.videoState" width="80%" title="播放视频" @cancel="okFunc" @before-close="getClose">
    <div  id="myVideoClass" style="display: flex;justify-content: center;">
      <video v-if="vdata.videoUrl"  id="myVideos" ref="myVideos" controls  class="video-js vjs-big-play-centered" style="height:600px; max-height:1000%;max-width:100vw">
        <source
            :src="vdata.videoUrl"
            :type="vdata.videoType">
      </video>
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
import Video from 'video.js'
import 'video.js/dist/video-js.css'
// import 'videojs-contrib-hls'
import {defineProps, reactive, nextTick, defineExpose,ref} from "vue";
const myVideos = ref()
// 响应式数据
const vdata :any = reactive ({

  playHandler: null,
  // type格式内容  m3u8:application/x-mpegURL,mp4:video/mp4， flv:video/x-flv,mov:rtmp/mp4
  videoType:'video/mp4',
  videoUrl:'',
  videoState:false,
})
function initVideo() {
  nextTick(() => {
    vdata.playHandler = Video('myVideos', {
      // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
      controls: true,
      // 自动播放属性,muted:静音播放
      autoplay: 'muted',
      // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
      preload: 'auto',
      // 设置视频播放器的显示宽度（以像素为单位）
      width: '887px',
      // 设置视频播放器的显示高度（以像素为单位）
      height: '665px'
    })
  })
}
function show(url){

  setTimeout(() => {
    vdata.videoUrl = url
    initVideo()
    vdata.videoState = true
    // myVideos.value.play() as any
  }, 1000)
}
function okFunc(){
  vdata.videoState = false
  vdata.videoUrl = ''
  vdata.playHandler = '';
  console.log(myVideos,'myVideosmyVideosmyVideos')
  myVideos.value.pause() as any
}
function getClose(){
  vdata.videoState = false
  vdata.videoUrl = ''
  vdata.playHandler = '';
  console.log(myVideos,'myVideosmyVideosmyVideos')
  myVideos.value.pause() as any
}
function beforeUnmount(){
  vdata.videoUrl=''
}


defineExpose( { show, close } )
</script>

