当前位置：首页 > news >正文

vue2+jessibuca播放h265视频

news 2025/9/11 11:58:28

文档地址：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"><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>