JiangningUrbanManagePc/src/views/components/video/index.vue

<!--
 * @Descripttion: 
 * @version: 
 * @Author: JC9527
 * @Date: 2023-12-26 13:59:07
 * @LastEditors: JC9527
 * @LastEditTime: 2023-12-26 14:26:20
-->
<template>
  <dia-log ref="dialog4" width="45%" title="实时监控" @close="Close">
    <div class="video-main">
      <!-- muted：是否静音 -->
      <video
        id="video"
        preload="auto"
        controls
        autoplay
        class="video-js vjs-default-skin vjs-big-play-centered"
        style="width: 100%; height: 100%; object-fit: fill"
      >
        <source :src="videoUrl" type="application/x-mpegURL" />
      </video>
    </div>
  </dia-log>
</template>
<script>
import diaLog from "../../components/dialog/index.vue"
import Videojs from "video.js"
import "videojs-contrib-hls";
// 引入中文json文件
import video_zhCN from 'video.js/dist/lang/zh-CN.json'
// 设置中文
Videojs.addLanguage('zh-CN', video_zhCN)
export default {
  components:{diaLog},
  data() {
    return {
      videoUrl: "https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8",
      videoPlayer: null,
    }
  },
  props:{},
  methods:{
    open() {
      this.$refs.dialog4.open('3');
      this.initVideo();
    },
    Close() {
      // this.videoPlayer.dispose();
      if(this.videoPlayer){
        this.videoPlayer.dispose();
      }
    },
    initVideo(){
      this.$nextTick(() => {
        this.videoPlayer = Videojs(`video`,{
          bigPlayButton: true,                    // 显示大按钮
          textTrackDisplay: false,
          posterImage: false,
          errorDisplay: false,
          language: 'zh-CN',
          controls: true,
          height: '100%',
          hls: {
            withCredentials: true,
          },
        })
      });
    },
  },
  destroyed() {
    if(this.videoPlayer){
      this.videoPlayer.dispose();
    }
  }
}
</script>
<style lang="scss" scoped>
.video-main {
  width: 100%;
  height: 500px;
  padding: 0 40px 0 0;
}
</style>