学习笔记——Vue中播放直播流（监控视频）

Vue项目中需要播放监控视频或者直播。

---

1.npm下载包

npm i video.js
npm i videojs-contrib-hls

2.引入包

import "video.js/dist/video-js.css";
import videojs from "video.js";
import "videojs-contrib-hls";

3.使用包

<video class="videoItem video-js vjs-default-skin vjs-big-play-centered vjs-16-9"
       id="rightvideos"
       autoplay
       muted
       src="直播流地址，类似hls"
       poster="未播放直播流，播放器的封面"
></video>

      // nextTick让代码在DOM更新后执行
      this.$nextTick(() => {
        this.airPlayer = videojs("video标签的id", {
          controls: true, //控件显示
          autoplay: true, //自动播放
          preload: "auto",
          bigPlayButton: true,
          errorDisplay: true,
          controlBar: true,
          hls: true,
        });
        setTimeout(() => {
          this.airPlayer.src({
            src: "直播流地址",
            type: "application/x-mpegURL",
          });
          this.airPlayer.play();
        }, 200);
      });

      // 如果退出播放所在页面，或者播放另一个监控视频
      // 最好使用this.airPlayer.dispose()来将当前直播流注销掉

如果使用uni-app框架来做，其中的video组件就直接可以播放直播流。