在vue中使用海康威视实现视频监控,视频直播方法一(RTMP流加Flash加videoJS)

在vue中使用海康威视实现视频监控,视频直播方法一(RTMP流加Flash加videoJS)

第一步

用npm装这个几个包

 "video.js": "^6.6.0",

 "videojs-flash": "^2.2.0",

 "videojs-swf": "^5.4.2",

第二步

在页面引入上述包

//视频插件包
import videojs from "video.js";
import "video.js/dist/video-js.css";
import "videojs-flash";
import SWF_URL from "videojs-swf/dist/video-js.swf";
videojs.options.flash.swf = SWF_URL; // 设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件

第三步

运用了swiper对视频进行动态生成，分屏等功能。

     <div class="swiper-no-swiping" id="swp" >
          <swiper :options="swiperOption">
            <swiper-slide
              :class="{swiperCss1:flagCss1,swiperCss4:flagCss4}"
              v-for="(item,index) in videoList"
              :key="index"
            >
              <div class="vBox">
                <h4>{{item.cameraName}}</h4>
                <div class="V_Box">
                  <div class="openVideoBox" @click="videoControl(item) "></div>
                  <video
                    :id="'my_player'+index"
                    class="video-js vjs-default-skin vjs-big-play-centered"
                    preload="auto"
                    :height="flagCss1==true ? '500px':'300px'"
                  >
                    <source :src="item.outTurnFlow" type="rtmp">
                  </video>
                </div>
              </div>
            </swiper-slide>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
          </swiper>
        </div>

data里面得数据配置

     //轮播图控件
     swiperOption: {
        slidesPerView: 1,
        slidesPerColumn: 1,
        spaceBetween: 30,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      //视频控件
      VideoOptions: {
        autoplay: true, // 是否自动播放
        muted: false, // 是否静音
        fluid: false, // 宽高自适应
        loop: false,//是否循环播放
        techOrder: ["flash"]
      },

methods里面得请求

// 查询视频列表并播放视频
    onSearch() {
      if (JSON.stringify(this.player1) !== "{}") {
        if (this.videoList.length > 0) {
          this.videoList.forEach((element, index) => {
            this.player1 = videojs("my_player" + index);
            this.player1.dispose();
          });
        }
        this.player1 = {};
        this.videoList = [];
      }
      if (this.formInline.section_id.length > 0) {
        this.axios.get("video/list", {
            params: { section_id: this.formInline.section_id }
          }).then(res => {
            if (res.data.pageResultList.length > 0) {
              this.videoList = res.data.pageResultList;
              setTimeout(() => {
                if (this.videoList.length > 0) {
                  this.videoList.forEach((element, index) => {
                    this.player1 = videojs(
                      "my_player" + index,
                      this.VideoOptions
                    );
                  });
                }
              }, 200);
            }else{
                this.$message(res.message)
            }
          });
      }
    },

注：上述有些样式代码，是为了切换分屏时候做得动态绑定处理

第四步

切换页面时需要停止这个播放才不会报错

beforeDestroy() {
    if (JSON.stringify(this.player1) !== "{}") {
      if (this.videoList.length > 0) {
        this.videoList.forEach((element, index) => {
          this.player1 = videojs("my_player" + index);
          this.player1.dispose();
        });
      }
    }
  }