flvvideo.vue

<template>
  <div class="ocxbox">
    <canvas id="video1" style="width:100%;height:100%;" class="fvideo"></canvas>
    <div class="control" hidden>
      <span :class="{'videostatus':true,'el-icon-video-play':videostatus,'el-icon-video-pause':!videostatus }" @click="controlvideo"></span>
      <!-- <span :class="{'el-icon-full-screen':!furllstatus,'el-icon-circle-close':furllstatus,'videostatus':true, 'full-icon':true}" @click="fullvideo" id="full"></span> -->
    </div>
  </div>
</template>
<script>
var player;
export default {
  data() {
    return {
      show: true,
      videostatus:false,
      furllstatus:false
    };
  },
  computed: {},
  methods: {
    controlvideo() {
      this.videostatus = !this.videostatus
      if(!this.videostatus) {
        this.startFunc()
      } else {
        this.stopFunc()
      }
    },
    fullvideo(ev){
      if(!this.furllstatus){
        this.furllstatus = true;
        this.fullel();
      } else {
        this.furllstatus = false;
        this.exitFullscreen();
      }

    },
    fullel(){
       var ele = document.getElementById("full")
      if (ele.requestFullscreen) {
          ele.requestFullscreen();
        } else if (ele.mozRequestFullScreen) {
          ele.mozRequestFullScreen();
        } else if (ele.webkitRequestFullScreen) {
          ele.webkitRequestFullScreen();
        }
    },
    exitFullscreen(){
       var de = document
        if (de.exitFullscreen) {
          de.exitFullscreen();
        } else if (de.mozCancelFullScreen) {
          de.mozCancelFullScreen();
        } else if (de.webkitCancelFullScreen) {
          de.webkitCancelFullScreen();
        }
    },
    startFunc(url) {
         this.stopFunc()
      /**
       * 设置解密密码,必须是16字节
       */
      player.setCryptoKey("");

      /**
       * 开始播放,参数为 http-flv或 websocket-flv 的url
       */
      player.start(url);
    },

    stopFunc() {
      /**
       * 停止播放
       */
      player.stop();
    },

    fullFunc() {
      /**
       * 全屏播放
       */
      player.fullscreen();
    },

    volumeChange(event) {
      /**
       * 设置音量
       * 0.0  ~~ 1.0
       * 当为0.0时,完全静音, 最大1.0
       */
      player.setVolume(event.target.value / 100.0);
    },

    bufferChange(event) {
      player.setBufferTime(event.target.value);
    },

    scaleModeChange(event) {
      /**
       * 视频缩放模式, 当视频分辨率比例与Canvas显示区域比例不同时,缩放效果不同:
       *  0 视频画面完全填充canvas区域,画面会被拉伸 --- 默认值
       *  1 视频画面做等比缩放后,对齐Canvas区域,画面不被拉伸,但有黑边
       *  2 视频画面做等比缩放后,完全填充Canvas区域,画面不被拉伸,没有黑边,但画面显示不全
       * 软解时有效
       */
      player.setScaleMode(event.target.value);
    }
  },
  mounted() {
    NodePlayer.load(() => {
      /**
       * 是否打印debug信息
       */
      // NodePlayer.debug(true);

      player = new NodePlayer();
      /**
       * 自动测试浏览器是否支持MSE播放，如不支持，仍然使用软解码。
       * 紧随 new 后调用
       * 不调用则只使用软解
       */
      //player.useMSE();

      /**
       * 传入 canvas视图的id，当使用mse时，自动转换为video标签
       */
      player.setView("video1");

      /**
       * 是否开启屏幕常亮
       * 在手机浏览器上,canvas标签渲染视频并不会像video标签那样保持屏幕常亮
       * 如果需要该功能, 可以调用此方法, 会有少量cpu消耗, pc浏览器不会执行
       */
      player.setKeepScreenOn();

      /**
       * 设置为等比缩放模式
       */
      player.setScaleMode(1);

      /**
       * 设置最大缓冲时长，单位毫秒，只在软解时有效
       */
      player.setBufferTime(1000);

      player.on("start", () => {
        console.log("player on start");
      });

      player.on("stop", () => {
        console.log("player on stop");
      });

      player.on("error", e => {
        console.log("player on error", e);
      });

      player.on("videoInfo", (w, h) => {
        console.log("player on video info width=" + w + " height=" + h);
      });

      player.on("audioInfo", (r, c) => {
        console.log("player on audio info samplerate=" + r + " channels=" + c);
      });

      player.on("stats", stats => {
        // console.log("player on stats=", stats);
      });

      player.on("metadata", metadata => {
        var m = NodePlayer.AMF.parseScriptData(
          metadata.buffer,
          0,
          metadata.length
        );
        console.log(m);
      });
    });
  }
};
</script>
<style lang="stylus">
.ocxbox {
  height: 100%;
  position: relative;

  .fvideo {
    height: 100%;
    width: 100%;
  }

  .control {
    position: absolute;
    bottom: 0;
    height: 40px;
    width: 100%;
    background: rgba(255, 255, 255, 0.2);
    display none
    .videostatus {
      cursor: pointer;
      color: #fff;
      font-size: 30px;
      line-height: 40px;
      padding-left: 10px;
    }
    .full-icon{
      float right
      margin-right 20px
      font-size 25px
    }
  }

}
 .ocxbox:hover {
     .control{
        // display block
        cursor pointer
     }
  }
</style>