视频流播放

<template>
  <div class="wrap">
    <img src="@/assets/community/default.png" alt="" />
    <video
      id="video1"
      class="video"
      poster="image"
      muted
      controls
      autoplay
      ref="player1"
      @dblclick="requestFullScreen"
    ></video>
  </div>
</template>
  
  <script>
import flvjs from "flv.js"; // 引入flvjs
export default {
  data() {
    return {
      player: null,
    };
  },
  methods: {
    //全屏
    requestFullScreen() {
      var videoElement = document.getElementById("video1");
      if (videoElement) {
        if (videoElement.requestFullscreen) {
          videoElement.requestFullscreen();
        } else if (videoElement.mozRequestFullScreen) {
          /* Firefox */
          videoElement.mozRequestFullScreen();
        } else if (videoElement.webkitRequestFullscreen) {
          /* Chrome, Safari and Opera */
          videoElement.webkitRequestFullscreen();
        } else if (videoElement.msRequestFullscreen) {
          /* IE/Edge */
          videoElement.msRequestFullscreen();
        }
      }
    },

    initializePlayer() {
      if (flvjs.isSupported()) {
        let videoElements = this.$refs.player1;
        if (videoElements) {
          this.player = flvjs.createPlayer({
            type: "flv", //指定视频类型
            isLive: true, //开启直播
            url: `ws://13.0.18.23:8866/live?url=rtsp://admin:admin@123@13.0.18.13:554/cam/realmonitor?channel=1&subtype=1`, //指定流链接
            hasAudio: false, //true电脑必须插入耳机.
          });
          this.player.on("error", (e) => {
            console.log(e);
          });
          this.player.attachMediaElement(videoElements);
          try {
            this.player.load(); // 加载视频
            this.player.play(); // 播放视频
            this.player.on("error", (e) => {
              console.log("播放器发生错误", e);
            });
          } catch (error) {
            console.log(error);
          }
        } else {
          console.log("无法获取videoElements");
        }
      } else {
        console.log("不支持flvjs");
      }
    },
    cleanupPlayer() {
      if (this.player) {
        this.player.pause();
        this.player.unload();
        //卸载DOM对象
        this.player.detachMediaElement();
        //卸载flvjs对象
        this.player.destroy();
        this.player = null;
      }
    },
  },
  mounted() {
    setTimeout(() => {
      this.initializePlayer();
    }, 100);
  },
  beforeDestroy() {
    this.cleanupPlayer();
  },
};
</script>
  
  <style scoped >
.highlight {
  border: 1px solid rgb(241, 241, 45) !important;
}
.wrap {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 100%;
  height: 100%;
  background-color: #2c3e50;
  box-sizing: border-box;
  position: relative; /* 为了让内部的绝对定位元素相对于wrap进行定位 */
}

.wrap img {
  position: absolute; /* 相对于wrap进行绝对定位 */
  width: auto; /* 图片宽度自适应 */
  height: auto; /* 图片高度自适应 */
  top: 50%; /* 顶部偏移50% */
  left: 50%; /* 左侧偏移50% */
  transform: translate(-50%, -50%); /* 使用transform进行居中 */
}
.wrap .video {
  width: 100%;
  height: 100%;
  /* border: 1px solid #ffffff; */
  object-fit: contain; /* 确保视频铺满整个容器 */
  z-index: 999; /* 确保视频元素在最上层 */
  pointer-events: auto; /* 修改为允许接收点击事件 */
}

video::-webkit-media-controls-timeline {
  display: none;
}

video::-webkit-media-controls-toggle-closed-captions-button {
  display: none;
}

video::-webkit-media-controls-current-time-display {
  display: none !important;
}

video::-webkit-media-controls-time-remaining-display {
  display: none !important;
}
</style>