vue播放flv和rtsp 格式视频

vue播放flv和rtsp 格式视频

调用

 <znvVideo
                  :vId="'0'"
                  :src="url"
                  :type="'rtsp'"
                ></znvVideo>

1.播放flv "flv.js":"1.6.2"

新建znVido.vue

<template>
  <div class="box-video" :id="'box-video-' + vId">
    <video
      :id="'znv-video-' + vId"
      class="video-js znv-video"
      :class="type + '-video'"
      controlslist="noplaybackrate nodownload disablePictureInPicture noremoteplayback"
      disablePictureInPicture
      controls
      muted
      autoplay
    ></video>
    <!-- noplaybackrate ：隐藏倍速
nodownload：隐藏下载
disablePictureInPicture：隐藏画中画 -->
  </div>
</template>

<script>
import flvjs from 'flv.js'
export default {
  name: 'ZnvVideo',
  data() {
    return {
      flvPlayer: null
    }
  },
  props: {
    vId: {
      type: String,
      required: true,
      default: ''
    },
    src: {
      type: String,
      required: true,
      default: ''
    },
    type: {
      type: String,
      required: true,
      default: ''
    }
  },
  mounted() {
    this.initFlv()
  },
  watch: {
    src() {
      this.initFlv()
    }
  },
  beforeDestroy() {
    if (this.flvPlayer) {
      this.flvPlayer.unload()
      this.flvPlayer.detachMediaElement()
      this.flvPlayer.destroy()
      this.flvPlayer = null
    }
  },
  methods: {
    initFlv() {
      if (flvjs.isSupported()) {
        var videoElement = document.getElementById('znv-video-' + this.vId)
        this.flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: this.src
        })
        this.flvPlayer.attachMediaElement(videoElement)
        this.flvPlayer.load()
        this.flvPlayer.play()
      }
    }
  }
}
</script>

<style lang="scss">
// // 播放按钮
video::-webkit-media-controls-play-button {
  display: none !important;
}
// 当前播放时间
video::-webkit-media-controls-current-time-display {
  display: none !important;
}
// 剩余时间
video::-webkit-media-controls-time-remaining-display {
  display: none !important;
}
// 音量按钮
// video::-webkit-media-controls-volume-control-container {
//   display: none !important;
// }
// 全屏
// video::-webkit-media-controls-fullscreen-button {
//   display: none !important;
// }
// 时间轴
video::-webkit-media-controls-timeline {
  display: none !important;
}
// 更多选项 --然而并不生效
video::-internal-media-controls-overflow-button {
  display: none !important;
}
/* 所有控件 */
// video::-webkit-media-controls-enclosure {
//   display: none;
// }

.box-video {
  width: 100%;
  height: 100%;
  .znv-video {
    width: 100%;
    height: 100%;
    .vjs-tech {
      pointer-events: none;
      // object-fit: cover;
      object-fit: fill;
    }
  }
}
</style>

1.播放rtsp

下载包

  "video.js": "^7.6.6",
  "videojs-flash": "^2.2.1",

新建znVido.vue

<template>
  <div class="box-video" :id="'box-video-' + vId">
    <video
      :id="'znv-video-' + vId"
      class="video-js znv-video"
      :class="type + '-video'"
      playsinline
      autoplay="autoplay"
    ></video>
  </div>
</template>

<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
export default {
  name: "ZnvVideo",
  data() {
    return {
      options: {
        // techOrder: ["html5", "Flvjs", "Streamedianjs"],
        autoplay: true, // 是否自动播放
        controls: false, // 是否显示控制条
        language: "zh-CN", // 设置语言
        muted: true, // 是否静音

        preload: "auto", // 预加载
        fluid: false, // 自适应宽高
        // src: this.src, // 要嵌入的视频源的源 URL
        objectFit: "cover", // 同css object-fit，作用于video标签
        notSupportedMessage: "此视频暂无法播放，请稍后再试",

        controlBar: {
          // progressControl: false,
          // liveDisplay: false,
          fullscreenToggle: true, // 全屏按钮，默认为true
          pictureInPictureToggle: true, // 画中画按钮，默认为true
          volumePanel: true, // 声音面板
          currentTimeDisplay: false, // 当前播放时间
          timeDivider: false, // 时间分割线
          durationDisplay: false, // 总时间
          remainingTimeDisplay: false, // 剩余时间
        },
      },
    };
  },
  props: {
    vId: {
      type: String,
      required: true,
      default: "",
    },
    src: {
      type: String,
      required: true,
      default: "",
    },
    type: {
      type: String,
      required: true,
      default: "",
    },
  },
  mounted() {
    // console.log(this.type, this.src, this.vId,"视频流--------");
    this.player = videojs("znv-video-" + this.vId, this.options);
    this.setSrc();
  },
  watch: {
    src() {
      // this.player.reset()
      this.setSrc();
      // this.player.load()
      // this.player.play()
    },
  },
  methods: {
    setSrc() {
      if (this.type === "hls") {
        this.initHls();
      } else if (this.type === "rtsp") {
        this.initRtsp();
      } else if (this.type === "flv") {
        this.initFlv();
      } else if (this.type === "mp4") {
        this.initMp4();
      }
    },
    initRtsp() {
      this.player.src({
        src: this.src,
        type: "application/x-mpegURL",
        // withCredentials: false,
        // bufferDuration: 5,
      });
    },
    initHls() {
      this.player.src({
        src: this.src,
        type: "application/x-mpegURL",
      });
    },

    initFlv() {
      this.player.src({
        src: this.src,
        type: "video/x-flv",
      });
    },
    initMp4() {
      this.player.src({
        src: this.src,
      });
    },
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
      this.player = null;
    }
  },
};
</script>

<style lang="scss">
.box-video {
  width: 100%;
  height: 100%;
  .znv-video {
    width: 100%;
    height: 100%;
    .vjs-tech {
      pointer-events: none;
      object-fit: cover;
    }
  }
  .rtsp-video {
    .vjs-progress-control {
      visibility: hidden;
    }
  }
}
</style>