index.vue 1.85 KB
<template>
  <div ref="container"></div>
</template>

<script>
import { watermarkBase64 } from './data';

export default {
  name: 'VionPlayer',
  data() {
    return {
      // eslint-disable-next-line
      _jessibuca: null,
    }
  },
  mounted() {
    this.init();
  },
  methods:{
    init(params = {}) {
      const options = Object.assign({
        container: this.$refs.container,
        decoder: '/jessibuca-pro/decoder-pro.js',
        isResize: false,
        text: '', // TODO: 功能暂不清楚
        useMSE: true,
        useWCS: false,
        isNotMute: false,
        timeout: 10,
        debug: true, // 是否开启控制台调试打印

        // 按钮和界面
        loadingText: '加载中...',
        controlAutoHide: false,
        supportDblclickFullscreen: false,
        showBandwidth: false, // 显示网速
        watermarkConfig: {
          image: {
            src: watermarkBase64,
            width: 150,
            height: 48
          },
          right: 10,
          top: 30
        },
        operateBtns: {
          fullscreen: true,
          screenshot: false,
          play: true,
          audio: true,
        },
      });

      this._jessibuca = new window.JessibucaPro(options);

      this.registerEvent(this._jessibuca);
    },
    registerEvent(playerIns) {
      playerIns.on("log", msg => {
        console.log("on-log", msg);
      });
    },

    // 暴露方法
    play(url) {
      if (url) {
        this._jessibuca.play(url);
      } else {
        console.error('The url is not valid');
      }
    },
    pause() {
      this._jessibuca.pause();
    },
    stop() {
      this._jessibuca.pause(true);
    },
    destroy() {
      if (this._jessibuca) {
        this._jessibuca.destroy().then(() => {
          this._jessibuca = null;
        });
      }
    },
  },
}
</script>

<style lang="scss" scoped>

</style>