jeesibuca官网地址[http://jessibuca.monibuca.com/]

index.html 文件引入

//去官网下载相关文件 http://jessibuca.monibuca.com/
<script src="./static/jessibucaplayer/jessibuca.js"></script>

视频组件文件

<template>
  <div class="videoboxjs box jessibox">
    <div id="containerjs"></div>
  </div>
</template>
<script>
//npm install vue-cli-plugin-jessibuca -D
export default {
  props: {
    videoUrl: String
  },
  data() {
    return {
      player:null
    }
  },
  mounted() {
    this.initVide()
  },
  unmounted() {
    this.player.destroy();
  },
  methods: {
    initVide(){
      var $container = document.getElementById('containerjs');
      var showOperateBtns = true; // 是否显示按钮
      var forceNoOffscreen = false; // 是否显示按钮
      var that = this
      this.player = new window.Jessibuca({
            container: $container,
            videoBuffer: 0.2, // 缓存时长
            // videoBuffer: 2, // 缓存时长
            isResize: false,
            text: "",
            loadingText: "疯狂加载中...",
            useMSE: false,
            debug: true,
            showBandwidth: showOperateBtns, // 显示网速
            operateBtns: {
                fullscreen: showOperateBtns,
                screenshot: showOperateBtns,
                play: showOperateBtns,
                audio: false,
                recorder: false
            },
            forceNoOffscreen: forceNoOffscreen,
            isNotMute: false,
        },);
      var _this = this;
      this.player.on("load", function () {
        console.log("on load");
      });

      this.player.on("log", function (msg) {
        console.log("on log", msg);
      });
      this.player.on("record", function (msg) {
        console.log("on record:", msg);
      });
      this.player.on("pause", function () {
        console.log("on pause");
        _this.playing = false;
      });
      this.player.on("play", function () {
        console.log("on play");
        _this.playing = true;
      });
      this.player.on("fullscreen", function (msg) {
        console.log("on fullscreen", msg);
      });

      this.player.on("mute", function (msg) {
        console.log("on mute", msg);
        _this.quieting = msg;
      });

      this.player.on("mute", function (msg) {
        console.log("on mute2", msg);
      });

      this.player.on("audioInfo", function (msg) {
        console.log("audioInfo", msg);
      });

      // this.player.on("bps", function (bps) {
      //   // console.log('bps', bps);
      // });
      // let _ts = 0;
      // this.player.on("timeUpdate", function (ts) {
      //     console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
      //     _ts = ts;
      // });

      this.player.on("videoInfo", function (info) {
        console.log("videoInfo", info);
      });

      this.player.on("error", function (error) {
        that.$message({
          message: '视频加载失败了，请尝试重新打开视频',
          type: 'warning'
        });
        console.log("error", error);
      });

      this.player.on("timeout", function () {
        console.log("timeout");
      });

      this.player.on('start', function () {
        console.log('frame start');
      })

      this.player.on("performance", function (performance) {
        var show = "卡顿";
        if (performance === 2) {
          show = "非常流畅";
        } else if (performance === 1) {
          show = "流畅";
        }
        // _this.performance = show;
      });
      this.player.on('buffer', function (buffer) {
        console.log('buffer', buffer);
      })

      this.player.on('stats', function (stats) {
        console.log('stats', stats);
      })

      this.player.on('kBps', function (kBps) {
        console.log('kBps', kBps);
      });

      // this.player.on("play", () => {
      //   this.playing = true;
      //   this.loaded = true;
      //   this.quieting = this.player.isMute();
      // });

      this.player.on('recordingTimestamp', (ts) => {
        console.log('recordingTimestamp', ts);
      })
      this.player.play(this.videoUrl)
    }
  },
  destroyed() {
    this.player.pause()
    this.player.destroy()
  },
}
</script>
<style lang="scss" scoped>
.videoboxjs{
  width: 100%;
  height: 100%;
  #containerjs{
    width: 100%;
    height: 100%;
  }
}
.box{
  height: 500px;
}
</style>