admin-fiveFollowing/src/views/deviceManage/powerEquip/videoEquip/checkVideo.vue

<template>

    <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="600px"
  
      @close="closeDialog(0)"
       @open="open"
    >
    <div
      v-html="randerHtml"
      style="width: 100%; height: 400px; background: #000"
    ></div>
     
    </el-dialog>

</template>

<script>
import { defineComponent, ref, watchEffect } from 'vue'

import videojs from 'video.js'
import 'videojs-contrib-hls'

export default defineComponent({
  name: 'CheckVideo',
  emits: ['closeDialog'],
  props: {
    flag: Boolean,
    dialogTitle: String,
    itemInfo: Object,
    deviceCode: String,
  },
  setup(props, context) {
    context
    const dialogVisible = ref(false)

    const videoUrl = ref('')
    const options = []
    const player = ref('')
    const randerHtml = ref('')

    // open(): Dialog弹窗打开之前做的事
    const open = () => {
     

      videoUrl.value = 'http://47.103.74.123/hls/'+props.deviceCode+'.m3u8';
      //  alert(videoUrl.value)
      // videoUrl.value ='http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8'

      window.setTimeout(getVideo, 100)

    }
    function getVideo() {
      randerHtml.value =
        '<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" style="width: 100%; height: 400px" poster loop="loop" autoplay="autoplay" ></video>'

      let options = {
        bigPlayButton: false,
        textTrackDisplay: false,
        posterImage: true,
        errorDisplay: false,
        controlBar: true,
        autoplay: true,
        controls: true,
        sources: [
          {
            src: videoUrl.value,
            type: 'application/x-mpegURL',
          },
        ],
      }

      window.setTimeout(function () {
        player.value = videojs('my-video', options,)
      }, 100)
    }

    // 关闭弹框
    const closeDialog = () => {
      if (player.value) {
        player.value.dispose()
        randerHtml.value = ''
      }

      context.emit('closeDialog', false)
      dialogVisible.value = false
    }

    watchEffect((fn, options) => {
      fn, options
      dialogVisible.value = props.flag
    })

    return {
      closeDialog,
      dialogVisible,
      options,
      open,
      videoUrl,

      getVideo,
      player,
      randerHtml,
    }
  },
})
</script>
 
<style scoped lang="scss">
.el-input,
.el-select {
  width: 240px;
}

// label样式
.el-form-item__label {
    width: 150px
}
.el-form-item__content {
    margin-left: 150px
}
</style>
<style >
* { touch-action: pan-y; }
</style>