Jessibuca ：vue项目使用步骤及遇到的问题及解决方法
Jessibuca介绍安装静态资源下载引入使用
Jessibuca介绍
jessibuca 是一款开源的纯 H5 直播流播放器，通过 Emscripten 将音视频解码库编译成 Js（ams.js/wasm) 运行于浏览器之中。兼容几乎所有浏览器，可以运行在 PC、手机、微信中，无需额外安装插件
安装
npm install vue-cli-plugin-jessibuca -D
静态资源下载
从官网下载相关压缩包将文件移入自身项目中：https://jessibuca.com/demo.html 根据自身vue版本放入Public或者Static文件夹下。
引入
因为Jessibuca在vue项目中使用时 在vue项目中需要在index.html文件中引入Jessibuca.js
使用
// 初始化视频函数
function init() {
if (jessibuca) {
jessibuca = new Jessibuca({
container: document.getElementById("container"),//jessibuca需要容器
videoBuffer: 0.2, // 缓存时长
isResize: false,
loadingText: "疯狂加载中...",
useMSE: true,
useWCS: true,
debug: true,
background: "@/assets/icons/svg/no-video.svg",
supportDblclickFullscreen: true,
showBandwidth: true, // 显示网速
operateBtns: {
fullscreen: true,
screenshot: true,
play: true,
audio: true,
},
forceNoOffscreen: true,
isNotMute: false,
timeout: 10,
});
}
}
//调用初始化函数
init();
//记得写播放的代码哦
jessibuca.play(视频地址 + "&&&.flv");//视频地址后面需要加上&&&.flv后缀,不然播放不出来哦
参考文章
发表评论