vue flv直播流视频监控播放

vue yekong 44℃

Vue 项目要求播放flv的直播视频,实现功能记录。使用到的插件flvjs

插件文档地址

插件文档地址

代码

/**
* @Author: 858834013@qq.com
* @Name: index
* @Date: 2022-06-16
* @Desc:
*/
<template>
  <div class="item1 hideScrollBar">
    <div @click="goVideo(item)" class="item1s" v-for="(item,index) in list" :key="index">
      <div class="item1sTitle">
        {{ item.pileNum }}
      </div>
      <div class="item1sBody">
        <img src="../../../../../assets/right/videoimg.png" alt="">
        <div class="item1sBodyInfo">
          <div class="item1sBodyInfol">
            <div class="dot"></div>
            <p>{{ item.poiName }}</p>
          </div>
          <!--          <div class="item1sBodyInfor">-->
          <!--            <p>12:20:25</p>-->
          <!--          </div>-->
        </div>
      </div>
    </div>
    <div class="pop" v-if="show">
      <div @click="show=false" class="pops"></div>
      <div class="playVideo">
        <video id="videoElement"></video>
      </div>
    </div>
  </div>
</template>

<script>

import {getCamUrl} from "@/api/api/accountCockpit";
import flvjs from 'flv.js'

export default {
  name: "index",
  components: {},
  props: {
    id: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      list: [],
      src: '',
      show: false,
    }
  },
  watch: {},
  mounted() {
    this.getdata()
  },
  methods: {
    getdata() {
      var that = this
      getCamUrl().then((res) => {
        if (res.code == 200) {
          that.list = res.data.cameras
        }
      })
    },
    getPlay() {
      if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: this.src
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
      }
    },
    goVideo(item) {
      this.src = item.data
      this.show = true
      this.$nextTick(() => {
        this.getPlay()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.item1 {
  width: 100%;
  height: 900px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
  overflow: scroll;

  .item1s {
    margin-right: 27px;
    margin-bottom: 10px;
    margin-top: 15px;

    .item1sTitle {
      font-size: 34px;
      font-family: PingFang;
      font-weight: 400;
      color: #9BABAD;
    }

    .item1sBody {
      width: 330px;
      height: 223px;
      background: #000000;
      position: relative;

      .item1sBodyInfo {
        position: absolute;
        bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        align-content: flex-start;
        width: 100%;

        .item1sBodyInfor {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          flex-wrap: nowrap;
          flex-direction: row;
          align-content: flex-start;
          margin-right: 15px;

          p {
            font-size: 34px;
            font-family: PingFang;
            font-weight: 400;
            color: #FFFFFF;
          }
        }

        .item1sBodyInfol {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: nowrap;
          flex-direction: row;
          align-content: flex-start;

          .dot {
            width: 17px;
            height: 17px;
            background: #0DF9E6;
            border-radius: 50%;
            margin-right: 20px;
            margin-left: 6px;
          }


          p {
            font-size: 34px;
            font-family: PingFang;
            font-weight: 400;
            color: #FFFFFF;
          }
        }
      }
    }
  }

  .item1s:nth-child(2n) {
    margin-right: 0;
  }
}

.pop {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  z-index: 100;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  .pops {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .playVideo {
    width: 1000px;
    //background: red;
    height: 1000px;
    display: flex;
    z-index: 1;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    position: relative;

    video {
      width: 100%;
      position: relative;
      height: 100%;
    }
  }
}
</style>

喜欢 (0)