vue2+jessibuca播放h265视频

文档地址：http://jessibuca.monibuca.com/api.html#background
1,文件放在public中

2,在html中引入

3，子组件

<template>
    <div :id="'container' + id"></div>
</template>

<script>
export default {
    props: ['url', 'id','index'],
    data() {
        return {
            jessibuca: null
        }
    },
    mounted() {
        this.initPlayer();
    },
    destroyed() {
        console.log('destroyed')
        this.clear()
    },
    methods: {
        clear(){
            console.log('清除',this.id)
            this.jessibuca.destroy();
        },
        initPlayer() {
            this.jessibuca = null;
            this.jessibuca = new window.Jessibuca({
                container: document.getElementById('container' + this.id),
                videoBuffer :2,
                decoder: "/decoder.js",
                isResize: false,
                autoWasm: true,
                text: "",
                loadingText: "请稍等, 视频加载中......",
                debug: false,
                useMSE: false,
                useWCS: false,
                autoWasm: true,
                hasAudio: false,
                operateBtns: {
                    fullscreen: true
                },
                // loadingTimeout: 5 + this.index * 0.5
            });

            // this.jessibuca.on('audioInfo', function (audioInfo) {
            //     console.log('audioInfo', audioInfo);
            // })

            // this.jessibuca.on('videoInfo', function (videoInfo) {
            //     console.log('videoInfo', videoInfo);
            // })
            // this.jessibuca.on('performance', function (performance) {
            //     let show = '卡顿'
            //     if (performance === 2) {
            //         show = '非常流畅'
            //     } else if (performance === 1) {
            //         show = '流畅'
            //     }
            //     console.log('性能', show)
            // })
            // this.jessibuca.on('kBps', function (kBps) {
            //     let _kBps = 0
            //     _kBps = Math.round(kBps)
            //     console.log('kBps', _kBps)
            // })

        },
        play(url) {
            // let url = this.url;
            console.log('url', url);
            console.log(this.jessibuca)
            this.jessibuca.play(url).catch((err) => {
                console.log('err', err);
            });
        }
    }
}
</script>

4,父组件

<template>
  <div class="videoBox">
    <div v-for="(item, index) in channelList" :key="index" class="item" style="border: 1px solid;">
      <player :url="item.url" :ref="'player' + item.id" v-if="item.status" :id="item.id" :index="index" />
      <div class="notOnline" v-else>
        <div class="imgBox"><img src="@/assets/img/nodata.png">
          <div>视频未连接</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import player from '@/components/player.vue'
export default {
  components: { player },
  data() {
    return {
      channelList: [],// 设备+通道信息
      currentIdList: []
    }
  },
  mounted() {
  this.getChannel()
  },
  destroyed() {
  },
  methods: {
    clearPlayer() {
      this.currentIdList.map(item => {
        if (this.$refs['player' + item]) {
          this.$refs['player' + item][0].clear()
        }
      })
    },
    // 获取通道信息
    getChannel() {
      this.$http.get(`aa`).then(res => {
        if (res.code == 0) {
          res.data.list.map(item => {
            this.channelList.push(item)
            this.currentIdList.push(item.id)
          })
          this.channelList.map((item, index) => {
            this.getPlay(item, index)
          })
        }
      })
    },
    // 获取视频地址
    getPlay(item, index) {
      this.$http.get(`bbb`).then(res => {
        if (res.code == 0) {
          this.$set(this.channelList[index], 'url', res.data.ws_flv)
          this.$refs['player' + item.id][0].play(res.data.ws_flv)
        }
      })
    },
  }
}
</script>