admin-fiveFollowing/src/views/siteManage/camera/checkVideo.vue

<template>
  <el-dialog
    :title="dialogTitle"
    v-model="dialogVisible"
    width="600px"
    @close="closeDialog(0)"
    @open="open"
  >
    <!-- <div>{{ deviceCode }}</div> -->
    <!-- <div style="background: #000">
      <video
        id="myVideo"
        :src="videoUrl"
        style="width: 100%; height: 400px"
        poster
        loop="loop"
        autoplay="autoplay"
      ></video>
    </div> -->

    <video
      id="my-video"
      class="video-js vjs-default-skin"
      controls
      preload="auto"
      style="width: 100%; height: 400px"
      poster
      loop="loop"
      autoplay="autoplay"
    >
      <!-- <source
        src="http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8"
        type="application/x-mpegURL"
      /> -->

      <source :src="videoUrl" type="application/x-mpegURL" />
    </video>
  </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('')

    // open(): Dialog弹窗打开之前做的事
    const open = () => {
      window.setTimeout(function () {
        videojs(
          'my-video',
          {
            bigPlayButton: false,
            textTrackDisplay: false,
            posterImage: true,
            errorDisplay: false,
            controlBar: true,
          },
          function () {
            // alert(1);
            console.log(this)

            this.play()
          }
        )
      }, 5000)

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

    const options = []

    // 关闭弹框
    const closeDialog = () => {
      context.emit('closeDialog', false)
      dialogVisible.value = false
    }

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

    return {
      closeDialog,
      dialogVisible,
      options,
      open,
      videoUrl,
    }
  },
})
</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>