实时视频播放（cmsv6flash）

这个实时视频的代码仅适用我的项目，但是流程是公用的。只是供大家做个参考！

1.先初始化视频插件，初始化完成后判断swfobject是否为undefined，如果是就用定时器继续初始视频插件，如果不是就给数据默认值，例如：使用的语言是中文，一共几个视频播放窗口，设置服务器信息等。

2.然后就发送获取设备信息请求，然后把你所需要的数据渲染到左侧菜单中。点击任意一台设备就开始播放视频。

注意：如果你们老板也是让你从别人家的接口写这个页面的话（别人家不配合的情况下 ），一些不知道的数据，就用永真函数给它一个返回值，只要能实现用户点击设备，这个设备的视频能正常播放就行。

<template>
  <div class="cockpit">
    <!-- 头部 -->
    <my-menu :isshowreturn="isshowreturn"></my-menu>
    <div class="main-top">
      <div class="top hasangle" id="chart_hasangle">
        <!-- 标题 -->
        <div class="mytitle" id="chart_title" style="color: #f6c568">
          {{ playvideo }}
        </div>
      </div>
    </div>
    <div class="main clearfix">
      <div class="video hasangle">
        <div class="menu">
          //左侧展示设备名称
          <el-menu
            class="el-menu-vertical"
            default-active="1"
            unique-opened="true"
            model="vertical"
          >
            <el-submenu
              v-for="item in firstTitle"
              :key="item.id"
              :index="item.id"
            >
              <template slot="title">
                <span>{{ item.nm }}</span>
              </template>
              <el-menu-item
                v-for="info in secondInfo"
                :key="info.id"
                v-if="info.pid === item.id"
                :index="info.id"
                @click="playLiveVideo(info.nm, info.abbr)"
              >
                <span>
                  {{ info.abbr }}
                </span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        //视频播放的四宫格位置
        </div>
        <div id="cmsv6flash" class="videoInfo"></div>
      </div>
    </div>
  </div>
</template>

<script>
import "../../../public/cmsv6player.min.js";

export default {
  name: "playvideo",
  data() {
    return {
      jsession: "",
      playvideo: "设备名称",
      firstTitle: [],
      secondInfo: [],
      // 窗口下标
      index: 0,
      // 存放当前窗口存在的pid
      savePid: [],

      // 播放视频数据
      playingStatusArray: [],

      swfobject: "",
      isInitFinished: false,
      width: "1450", //插件宽度
      height: "750", //插件高度
    };
  },
  created() {
    this.searchPeople();
    console.log("create");
  },
  mounted() {
    this.initPlayerExample();
    console.log("mount");
  },
  methods: {
   // 初始化视频插件
    getUrlParameter(name) {
      if (true) {
        return "";
      }
    },
    // 获取设备信息，用于左侧展示数据
    searchPeople() {
      this.jsession = localStorage.getItem("jsession");
      var xhr = new XMLHttpRequest();
      xhr.open(
        "GET",
         "url",
        true
      );

      xhr.send();
      xhr.onload = () => {
        if (/^2\d{2}$/.test(xhr.status)) {
          const data = JSON.parse(xhr.responseText);
          this.firstTitle = data.companys;
          this.secondInfo = data.vehicles;
        } else {
          console.log(xhr.responseText);
        }
      };
    },

    
    initPlayerExample() {
      for (var i = 0; i < 101; i++) {
        this.playingStatusArray.push(false);
      }
      // 实时视频
      var _isVodMode = 0;
      // 赋值初始化未完成
      this.isInitFinished = false;
      var strLang = this.getUrlParameter("lang");
      var options = {
        domId: "cmsv6flash",
        isVodMode: _isVodMode == "1" ? true : false,
        width: this.width,
        height: this.height,
        lang: strLang == "" ? "en" : strLang,
      };
      this.swfobject = new Cmsv6Player(options);
      this.initFlash();
    },
    //插件初始化完成后执行
    initFlash() {
      if (
        typeof this.swfobject == "undefined" || typeof this.swfobject.setWindowNum == "undefined"
      ) {
        let timer = setTimeout(this.initFlash, 50);
      } else {
        // 初始化插件语言
        var language = "zh";
        this.swfobject.setLanguage(language);
        // 先将全部窗口创建好
        this.swfobject.setWindowNum(4);
        // 设置服务器信息
        var serverIp = "服务器地址";
        var serverPort = "6605";
        this.swfobject.setServerInfo(serverIp, serverPort);
        this.isInitFinished = true;
      }
    },

    playLiveVideo(pid, addr) {
      if (this.savePid.includes(pid)) {
        return;
      }
      if (!this.isInitFinished) {
        return;
      }
      //通道号
      var channel = "0";
      //码流
      var stream = "1";
      this.swfobject.setBufferTime(0, 2);
      this.swfobject.setBufferTimeMax(0, 6);
      //先停止视频窗口
      this.swfobject.stopVideo(this.index);
      //设置窗口标题
      var title = addr;
      this.swfobject.setVideoInfo("0", title);
      //播放视频
      this.swfobject.startVideo(
        this.index,
        this.jsession,
        pid,
        channel,
        stream,
        true
      );
      this.savePid.append(pid);

      if (this.index < 4) {
        this.index++;
      } else {
        this.index = 0;
      }
    },
  },
};
</script>

<style scoped lang="scss">
// 引入驾驶舱通用样式
@import "../../styles/my-cockpit.scss";
// 引入驾驶舱表格样式
@import "../../styles/my-table.scss";
// 引入科技感字体

.cockpit {
  // font-family: 'electronicFont';
  .main {
    .video {
      width: 100%;
      height: 83vh;
      margin-top: 0.2083rem;
      display: flex;
      justify-content: space-between;
      .menu {
        width: 200px;
        height: 78vh;
        border: 3px solid #80e4ff !important;
        padding-top: 5px;

        div:nth-child(1) {
          font-size: 20px;
          color: #80e4ff;
          text-align: center;
          padding: 3px 0;
        }

        .el-menu-item {
          color: #80e4ff;

          .is-active {
            color: #80e4ff;
          }
        }

        .el-submenu__title {
          span {
            color: #80e4ff;
          }
        }
      }
      .videoInfo {
        width: 1400px;
        height: 95vh;
        div {
          display: flex;
          justify-content: space-between;
          .huabu {
            width: 50%;
            height: 50%;
          }
        }
      }
    }
  }
  .videoInfo {
    position: fixed;
    top: 0px;
  }
}
.flex {
  display: flex;
}

.main-top {
  // width: 10rem;
  width: 8.9375rem;
  margin: 0.2083rem auto 0;
  .top {
    display: block;
    // width: 9.4717rem;
    height: auto;
    // margin: 0.0781rem 0 0;
    // border: 1px solid #35879a;
  }
}
</style>