Vue中Jessibuca播放器的使用

xiaoqiancai

已于 2025-03-24 14:22:08 修改

阅读量387

点赞数 3

文章标签： vue.js 前端 javascript

于 2025-03-24 14:18:08 首次发布

本文链接：https://blog.youkuaiyun.com/xiaoqiancai/article/details/146474544

版权

Vue中Jessibuca播放器的使用

Jessibuca是什么
Jessibuca是一款开源的纯H5直播流播放器，利用Emscripten技术将音视频解码库编译成JavaScript (ams.js/wasm)，使其能够在浏览器中运行。这个先进的技术实现了Jessibuca在几乎所有现代浏览器上的兼容性，包括PC、手机和微信等平台。用户可以无需安装额外插件，直接在浏览器中使用。Jessibuca进行直播流播放，为用户带来便捷、高效的视频观看体验。
vue项目中使用Jessibuca
1）引入jessibuca.js
在官网中找到你需要的demo，这里我用的是vue的demo 【Jessibuca官网demo】然后把jessibuca.js、 decoder.js、decoder.wasm 这三个文件放到static中的jessibuca文件夹下，同时在入口文件index.html中引入jessibuca.js

<script src="./static/jessibuca/jessibuca.js"></script>

2）组件中使用

<div ref="container"></div>

3）创建播放器，这里重点要强调一下decoder的地址，一定要写对，要不然线上环境会报错

this.jessibuca = new Jessibuca({
   container: this.$refs.container,
   videoBuffer: 0.2, // 缓存时长
   isResize: false,
   text: '',
   loadingText: '加载中',
   debug: true,
   decoder: './static/jessibuca/decoder.js',
   showBandwidth: true, // 显示网速
   operateBtns: {
     fullscreen: true,
     screenshot: true,
     play: true,
     audio: false,
     record: false
   },
   forceNoOffscreen: true,
   isNotMute: false,
   heartTimeout: 100,
   controlAutoHide: true,
   hiddenAutoPause: true
 })
 this.jessibuca.on("pause", function () {});
 this.jessibuca.on("play", () => {});

4）在config文件夹下的index.js文件中，找到build对象下的assetsSubDirectory属性，将其值设置为'static'，表示打包后的静态资源文件将会放在dist/static目录下。


module.exports = {

  // 省略其他配置...

  build: {

    // 省略其他配置...

    assetsSubDirectory: 'static',

    // 省略其他配置...

  },

  // 省略其他配置...

}

Jessibuca使用常见问题