vue2之jessibuca视频插件使用教程详细讲解

<script type="text/javascript" src="/jessibuca/jessibuca.js"></script>

<template>
  <div
    ref="container"
    @dblclick="fullscreenswich"
    style="width: 100%; height: 100%; background-color: #000000; margin: 0 auto; position: relative"
  >
    <div
      class="buttons-box"
      id="buttonsbox"
    >
      <div class="buttons-box-left">
        <i
          v-if="!playing"
          class="iconfont icon-play jessibuca-btn"
          @click="playbtnclick"
        ></i>
        <i
          v-if="playing"
          class="iconfont icon-pause jessibuca-btn"
          @click="pause"
        ></i>
        <i
          class="iconfont icon-stop jessibuca-btn"
          @click="destroy"
        ></i>
        <i
          v-if="isnotmute"
          class="iconfont icon-audio-high jessibuca-btn"
          @click="mute()"
        ></i>
        <i
          v-if="!isnotmute"
          class="iconfont icon-audio-mute jessibuca-btn"
          @click="cancelmute()"
        ></i>
      </div>
      <div class="buttons-box-right">
        <span class="jessibuca-btn">{{ kbps }} kb/s</span>
        <i
          class="iconfont icon-camera1196054easyiconnet jessibuca-btn"
          @click="screenshot"
          style="font-size: 1rem !important"
        ></i>
        <i
          class="iconfont icon-shuaxin11 jessibuca-btn"
          @click="playbtnclick"
        ></i>
        <i
          v-if="!fullscreen"
          class="iconfont icon-weibiaoti10 jessibuca-btn"
          @click="fullscreenswich"
        ></i>
        <i
          v-if="fullscreen"
          class="iconfont icon-weibiaoti11 jessibuca-btn"
          @click="fullscreenswich"
        ></i>
        <i
          style="font-size: 28px"
          class="iconfont icon-video-close jessibuca-btn"
          @click="closevideo()"
        ></i>
      </div>
    </div>
  </div>
</template>

<script>
let jessibucaplayer = {};
export default {
  name: "wkvideoplayer",
  data() {
    return {
      playing: false,
      isnotmute: false,
      quieting: false,
      fullscreen: false,
      loaded: false, // mute
      speed: 0,
      performance: "", // 工作情况
      kbps: 0,
      btndom: null,
    };
  },
  props: ["videourl", "error", "hasaudio", "height"],
  mounted() {
    this.$nexttick(() => {
      this.updateplayerdomsize();
      this.btndom = document.getelementbyid("buttonsbox");
      window.onresize = () => {
        this.updateplayerdomsize();
      };
      if (this.videourl) {
        this.play(this.videourl);
      } else {
        return;
      }
    });
  },
  watch: {
    videourl(newdata) {
      this.play(newdata);
    },
    immediate: true,
  },
  methods: {
    updateplayerdomsize() {
      let dom = this.$refs.container;
      let width = dom.parentnode.clientwidth;
      let height = dom.parentnode.clientheight;

      const clientheight = math.min(
        document.body.clientheight,
        document.documentelement.clientheight
      );
      if (height > clientheight) {
        height = clientheight;
        width = (16 / 9) * height;
      }

      dom.style.width = width + "px";
      dom.style.height = height + "px";
    },
    create() {
      let options = {};
      jessibucaplayer[this._uid] = new window.jessibuca(
        object.assign(
          {
            container: this.$refs.container,
            autowasm: true, // 在使用mse或者webcodecs 播放h265的时候，是否自动降级到wasm模式。
            background: "", //背景图片
            controlautohide: false, //底部控制台是否自动隐藏
            debug: false, //是否开启控制台调试打印
            decoder: "/jessibuca/decoder.js",
            hasaudio: typeof this.hasaudio == "undefined" ? true : this.hasaudio, // 是否有音频，如果设置false，则不对音频数据解码，提升性能。
            hasvideo: true, //  是否开启控制台调试打印
            hearttimeout: 5, //设置超时时长, 单位秒播放中途,如果超过设定时长无数据返回,则回调timeout事件
            hearttimeoutreplay: true, //是否开启心跳超时之后自动再播放
            hearttimeoutreplaytimes: 3, //重试次数  hearttimeoutreplay 重试失败之后，不再重新播放视频地址。如果想无限次重试，可以设置为-1
            hiddenautopause: false, //是否开启当页面的'visibilitystate'变为'hidden'的时候，自动暂停播放。
            hotkey: false, //是否开启键盘快捷键 esc -> 退出全屏；arrowup -> 声音增加；arrowdown -> 声音减少；
            isflv: false, //当为true的时候：ws协议不检验是否以.flv为依据，进行协议解析。
            isfullresize: false, //当为true的时候：视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全
            isnotmute: this.isnotmute, // 是否开启声音，默认是关闭声音播放的。
            isresize: false, //当为true的时候：视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边。 当为false的时候：视频画面完全填充canvas区域,画面会被拉伸。
            keepscreenon: false, //开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮。pc端不会生效，仅手机端生效
            loadingtext: "请稍等, 视频加载中......", // 视频加载转圈时的提示文字
            loadingtimeout: 10, //当play()的时候，如果没有数据返回，则回调
            loadingtimeoutreplay: true, ///是否开启loading超时之后自动再播放
            loadingtimeoutreplaytimes: 3, //loadingtimeoutreplay 重试失败之后，不再重新播放视频地址。
            operatebtns: {
              // 配置操作按钮 其中
              fullscreen: false, //全屏按钮
              screenshot: false, //截图按钮
              play: false, //播放暂停按钮
              audio: false, //声音按钮
              record: false, //录制按钮
            },
            recordtype: "webm", //默认录制的视频格式
            rotate: 0, //设置旋转角度
            showbandwidth: false, // 显示网速
            supportdblclickfullscreen: false, // 是否支持屏幕的双击事件，触发全屏，取消全屏事件。
            timeout: 10, //设置超时时长, 单位秒在连接成功之前(loading)和播放中途(heart),如果超过设定时长无数据返回,则回调timeout事件
            usemse: location.hostname !== "localhost" && location.protocol !== "https:", //是否开启mediasource硬解码
            usewcs: location.hostname === "localhost" || location.protocol === "https", //是否开启webcodecs硬解码
            usewebfullscreen: false, //是否使用web全屏(旋转90度)（只会在移动端生效）。
            videobuffer: 0, // 设置最大缓冲时长，单位秒，播放器会自动消除延迟。
            wasmdecodeerrorreplay: true, // 是否开启解码失败重新播放
            wcsusevideorender: true, //webcodecs硬解码是否通过video标签渲染
          },
          options
        )
      );
      let jessibuca = jessibucaplayer[this._uid];
      let _this = this;

      // 监听 jessibuca 初始化事件。
      jessibuca.on("load", function () {
        // console.log("on load init");
      });

      // 信息，包含错误信息
      jessibuca.on("log", function (msg) {
        // console.log("on log", msg);
      });

      // 触发暂停事件
      jessibuca.on("pause", function () {
        _this.playing = false;
      });

      // 触发播放事件
      jessibuca.on("play", function () {
        _this.playing = true;
      });

      // 当前是否全屏
      jessibuca.on("fullscreen", function (msg) {
        // console.log("on fullscreen", msg);
        _this.fullscreen = msg;
      });

      // 触发声音事件，返回boolean值
      jessibuca.on("mute", function (msg) {
        // console.log("on mute", msg);
        _this.isnotmute = !msg;
      });

      // 当解析出音频信息时回调，2个回调参数
      // numofchannels：声频通道
      // samplerate 采样率
      // enctypecode 音频编码类型(10:aac,7:alaw(g711a),8:mulaw(g711u))
      // enctype 音频编码类型(字符串)
      jessibuca.on("audioinfo", function (msg) {
        // console.log("audioinfo", msg);
      });

      let _ts = 0;
      // 当前视频帧pts，单位毫秒ms
      jessibuca.on("timeupdate", function (ts) {
        _ts = ts;
      });

      // 当解析出视频信息时回调，2个回调参数
      //width：视频宽
      //height：视频高
      //enctypecode 视频编码类型(10:h264,12:h265)
      //enctype 视频编码类型(字符串)
      jessibuca.on("videoinfo", function (info) {
        // console.log("videoinfo", info);
      });

      // 错误信息
      // 目前已有的错误信息：
      // jessibuca.error.playerror ;播放错误，url 为空的时候，调用play方法
      // jessibuca.error.fetcherror ;http 请求失败
      // jessibuca.error.websocketerror; websocket 请求失败
      // jessibuca.error.webcodecsh265notsupport; webcodecs 解码 h265 失败
      // jessibuca.error.mediasourceh265notsupport; mediasource 解码 h265 失败
      // jessibuca.error.wasmdecodeerror ; wasm 解码失败
      jessibuca.on("error", function (error) {
        // console.log("error", error);
      });

      // 当设定的超时时间内无数据返回,则回调
      jessibuca.on("timeout", function () {
        // console.log("timeout");
      });

      // 渲染开始
      jessibuca.on("start", function () {
        // console.log("start");
      });

      // 渲染性能统计，流开始播放后回调，每秒1次。
      // 0: 表示卡顿
      // 1: 表示流畅
      // 2: 表示非常流程
      jessibuca.on("performance", function (performance) {
        let show = "卡顿";
        if (performance === 2) {
          show = "非常流畅";
        } else if (performance === 1) {
          show = "流畅";
        }
        _this.performance = show;
      });

      // 流状态统计，流开始播放后回调，每秒1次。
      // buf: 当前缓冲区时长，单位毫秒,
      // fps: 当前视频帧率,
      // abps: 当前音频码率，单位byte,
      // vbps: 当前视频码率，单位byte，
      // ts:当前视频帧pts，单位毫秒
      jessibuca.on("stats", function (stats) {});

      // 当前网速， 单位kb 每秒1次,
      jessibuca.on("kbps", function (kbps) {
        _this.kbps = math.round(kbps);
      });

    },
    playbtnclick: function (event) {
      this.play(this.videourl);
    },
    play: function (url) {
      console.log(url);
      if (jessibucaplayer[this._uid]) {
        this.destroy();
      }
      this.create();
      jessibucaplayer[this._uid].on("play", () => {
        this.playing = true;
        this.loaded = true;
        this.quieting = jessibuca.quieting;
      });
      if (jessibucaplayer[this._uid].hasloaded()) {
        jessibucaplayer[this._uid].play(url);
      } else {
        jessibucaplayer[this._uid].on("load", () => {
          console.log("load 播放");
          jessibucaplayer[this._uid].play(url);
        });
      }
    },
    pause: function () {
      if (jessibucaplayer[this._uid]) {
        jessibucaplayer[this._uid].pause();
      }
      this.playing = false;
      this.err = "";
      this.performance = "";
    },
    screenshot: function () {
      if (jessibucaplayer[this._uid]) {
        jessibucaplayer[this._uid].screenshot();
      }
    },
    mute: function () {
      if (jessibucaplayer[this._uid]) {
        jessibucaplayer[this._uid].mute();
      }
    },
    cancelmute: function () {
      if (jessibucaplayer[this._uid]) {
        jessibucaplayer[this._uid].cancelmute();
      }
    },
    destroy: function () {
      if (jessibucaplayer[this._uid]) {
        jessibucaplayer[this._uid].destroy();
      }
      if (document.getelementbyid("buttonsbox") == null) {
        this.$refs.container.appendchild(this.btndom);
      }
      jessibucaplayer[this._uid] = null;
      this.playing = false;
      this.err = "";
      this.performance = "";
    },
    eventcallback: function (type, message) {},
    fullscreenswich: function () {
      let isfull = this.isfullscreen();
      jessibucaplayer[this._uid].setfullscreen(!isfull);
      this.fullscreen = !isfull;
    },
    isfullscreen: function () {
      return (
        document.fullscreenelement ||
        document.msfullscreenelement ||
        document.mozfullscreenelement ||
        document.webkitfullscreenelement ||
        false
      );
    },
    closevideo: function () {
      this.destroy();
      this.$emit("videoclose");
    },
  },
};
</script>

<style>
.buttons-box {
  width: 100%;
  height: 28px;
  background-color: rgba(43, 51, 63, 0.7);
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  left: 0;
  bottom: 0;
  user-select: none;
  z-index: 10;
}

.jessibuca-btn {
  width: 20px;
  color: rgb(255, 255, 255);
  line-height: 27px;
  margin: 0px 10px;
  padding: 0px 2px;
  cursor: pointer;
  text-align: center;
  font-size: 0.8rem !important;
}

.buttons-box-right {
  position: absolute;
  right: 0;
}
@font-face {
  font-family: "iconfont"; /* project id 1291092 */
  src: url("~@/assets/iconfont/iconfont.woff2?t=1673251105600") format("woff2");
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-play:before {
  content: "\e603";
}

.icon-pause:before {
  content: "\e6c6";
}

.icon-stop:before {
  content: "\e6a8";
}

.icon-audio-high:before {
  content: "\e793";
}

.icon-audio-mute:before {
  content: "\e792";
}

.icon-shuaxin11:before {
  content: "\e720";
}

.icon-weibiaoti10:before {
  content: "\e78f";
}

.icon-weibiaoti11:before {
  content: "\e790";
}

.icon-camera1196054easyiconnet:before {
  content: "\e791";
}
</style>

     <wk-video-player
       class="video"
       ref="player"
       :videourl="videourl"
       @videoclose="onvideoclose"
       />
---          
videourl：'直播流url地址'
onvideoclose() {
   this.$set(this.videourl, "");
},