vue2使用flv.js播放live.flv流视频

1.下载flv.js

这里我用的是 “flv.js”: “^1.6.2”,

npm install flv.js

2.引入使用

import flvjs from "flv.js";

3.元素

<template>
  <div class="view-page-default shi-shi-shi-ping">
    <div class="video-box" ref="videoBox">
      <div v-for="(item, index) in urls" :key="index">
        <div :class="'item-video-box' + (item.full ? ' full' : '')">
          <div>
            <video
              class="video-js"
              preload="auto"
              :poster="item.poster"
              @canplay="canplay"
              @play="videoPlay"
              :data-index="index"
            ></video>
            <div
              @click="playRun"
              :data-index="index"
              :class="
                'btn' +
                  (item.play
                    ? ' hid'
                    : item.loading
                    ? ' loading'
                    : item.pause
                    ? ' play'
                    : ' play')
              "
            >
              <div></div>
            </div>
            <div
              v-if="item.play"
              @click="videoFull"
              :data-index="index"
              :class="'full-screen' + (item.full ? ' full' : '')"
            ></div>
          </div>
        </div>
        <div class="item-video-name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

js里面

  data() {
    return {
      urls: [
        {
          name: "xxx视频",
          url: "xxxxx.live.flv",
          poster: "xxx.jpg"
        },
      
      ],
      itemVideo: null
    };
  },
  //点击其它的视频禁用正在播放的视频
  watch: {
    itemVideo: function(newValue, oldValue) {
      const that = this;
      if (oldValue) {
        that.urls.forEach((v, index) => {
          if (index == oldValue) {
            if (v.flvPlayer) {
              v.flvPlayer.pause();
              v.play = false;
              v.pause = true;
              v.loading = false;
              url.full = false;
              clearTimeout(v.stopTime);
              v.stopTime = null;
              that.$forceUpdate();
            }
          }
        });
      }
    }
  },
    methods: {
    // 全屏
    videoFull(e) {
      let self = this;
      let url = self.urls[parseInt(e.target.getAttribute("data-index"))];
      if (url.full) {
        url.full = false;
      } else {
        url.full = true;
      }
      this.$forceUpdate();
    },

    // 播放
    videoPlay(e) {
      let self = this;
      let url = self.urls[parseInt(e.target.getAttribute("data-index"))];
      if (url.stopTime) return;

      // 倒计时
      url.stopTime = setTimeout(() => {
        url.flvPlayer.pause();
        url.play = false;
        url.pause = true;
        url.loading = false;
        // url.full = false;
        self.$forceUpdate();
      }, 10 * 60 * 1000);
    },

    // 可以播放
    canplay(e) {
      let self = this;
      let url = self.urls[parseInt(e.target.getAttribute("data-index"))];
      let py = e.target;
      if (url.play) return;
      let urlIndex = py.getAttribute("data-index");
      this.itemVideo = urlIndex;
      url.flvPlayer.play();
      url.play = true;
      url.pause = false;
      url.loading = false;
      self.$forceUpdate();
    },

    playRun(e) {
      let py,
        self = this;
      if (!e.target.classList.contains("btn")) {
        py = e.target.parentNode;
      } else {
        py = e.target;
      }
      let url = self.urls[parseInt(py.getAttribute("data-index"))];
      let liveVideo = py.parentNode.getElementsByClassName("video-js")[0];
      let urlIndex = py.getAttribute("data-index");
      this.itemVideo = urlIndex;
      if (url.play) {
        // self.flvPlayer.pause();
        url.flvPlayer.pause();
        url.play = false;
        url.pause = true;
        url.loading = false;
        // url.full = false;
        clearTimeout(url.stopTime);
        url.stopTime = null;
        // clearTimeout(self.stopTime);
        // self.stopTime = null;
        self.$forceUpdate();
        return;
      } else if (url.pause) {
        // self.flvPlayer.play();
        url.flvPlayer.play();
        url.play = true;
        url.pause = false;
        url.loading = false;
        // url.full = false;
        self.$forceUpdate();
        return;
      }
      url.play = false;
      url.pause = false;
      url.loading = true;
      self.$forceUpdate();
      url.flvPlayer = flvjs.createPlayer({
        type: "flv",
        isLive: true,
        url: url.url
      });
      url.flvPlayer.attachMediaElement(liveVideo);
      url.flvPlayer.load();
    }
  },
  destroyed() {
    if (this.flvPlayer) {
      this.flvPlayer.pause();
      this.flvPlayer.destroy();
    }
  }

4.样式

.video-box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  > div {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 33.33333%;
    padding: pointSize(16rem); // &::before {
    //     content: "";
    //     display: block;
    //     position: relative;
    //     padding-top: 75%;
    // }
  }
}

.item-video-box {
  position: relative;
  width: 100%;
  &::before {
    content: "";
    display: block;
    position: relative;
    padding-top: 56.25%;
  }
  &.full {
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    #video {
      width: 100% !important;
      height: 100% !important;
    }
  }
  > div {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

.item-video-name {
  font-size: pointSize(45rem);
  margin-top: pointSize(16rem);
}

.video-js {
  width: 100%;
  height: 100%;
  background-color: #000;
}

.hid {
  > div {
    display: none;
  }
}

.btn {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.full-screen {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30px;
  height: 30px;
  //background-image: url(../../assets/fullscreen.png);
  background-image: url(../../assets/exitFullScreen.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  &.full {
    width: 50px;
    height: 50px;
    background-image: url(../../assets/exitFullScreen.png);
  }
}

.pause {
  > div {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -40px;
    margin-left: -40px;
    &::after {
      content: "";
      display: block;
      width: 80px;
      height: 80px;
      border: 4px solid #fff;
      border-radius: 50%;
    }
    &::before {
      content: "| |";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: block;
      font-size: 23px;
      color: #fff;
      font-weight: bold;
    }
  }
}

.play {
  > div {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -40px;
    margin-left: -40px;
    &::after {
      content: "";
      display: block;
      width: 80px;
      height: 80px;
      border: 4px solid #fff;
      border-radius: 50%;
    }
    &::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      margin-left: 2px;
      display: block;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
      border-left: 20px solid #fff;
    }
  }
}

.loading {
  > div {
    &::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -40px;
      margin-top: -40px;
      width: 80px;
      height: 80px;
      // background: url(../../assets/loading.png) no-repeat center;
      background-size: 100% auto;
      animation: loading 1s linear infinite both;
    }
  }
}

@keyframes loading {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}