Vue中Jessibuca播放器的使用
-
Jessibuca是什么
Jessibuca是一款开源的纯H5直播流播放器，利用Emscripten技术将音视频解码库编译成JavaScript (ams.js/wasm)，使其能够在浏览器中运行。这个先进的技术实现了Jessibuca在几乎所有现代浏览器上的兼容性，包括PC、手机和微信等平台。用户可以无需安装额外插件，直接在浏览器中使用。Jessibuca进行直播流播放，为用户带来便捷、高效的视频观看体验。
-
如何在vue中使用Jessibuca
2.1 引入文件
在官网的demo中找到你需要的demo，这里我用的是vue的demo 【Jessibuca官网demo】然后把jessibuca.js、 decoder.js、decoder.wasm 这三个文件放到public中，同时在入口文件index.html中引入jessibuca.js
index.html中<script src="./jessibuca.js"></script>2.2 创建DOM结构
<template>
<div class="root">
<div class="container-shell">
<div :id="id" ref="container" style="width: 100%; height: 100%"></div>
</div>
</div>
</template>
2.3创建播放器
create(options) {
options = options || {};
this.jessibuca = new window.Jessibuca(
Object.assign(
{
container: document.getElementById(this.id),
decoder: "/decoder.js",
isResize: false,
text: "",
loadingText: "疯狂加载中...",
debug: false,
operateBtns: {
fullscreen: this.showOperateBtns,
screenshot: this.showOperateBtns,
play: this.showOperateBtns,
audio: this.showOperateBtns
},
isNotMute: true,
timeout: 10
},
options
)
);
var _this = this;
this.jessibuca.on("pause", function () {
console.log("on pause");
_this.playing = false;
});
this.jessibuca.on("play", () => {
_this.playing = true;
_this.loaded = true;
});
},
完整代码如下
子组件：
<template>
<div class="root">
<div class="container-shell">
<div :id="id" ref="container" style="width: 100%; height: 100%"></div>
</div>
</div>
</template>
<script>
export default {
name: "CameraIframe",
props: {
id: {
type: String,
default: ""
},
videoUrl: {
type: String,
default: ""
}
},
data() {
return {
jessibuca: null,
version: "",
playing: false,
loaded: false, // mute
showOperateBtns: false,
err: "",
performance: "",
volume: 1
};
},
watch: {
videoUrl: {
handler(n) {
this.play();
}
}
},
mounted() {
this.create();
if (this.videoUrl != 0) {
this.play();
}
window.onerror = (msg) => (this.err = msg);
},
destroyed() {
this.jessibuca.destroy();
},
methods: {
create(options) {
options = options || {};
this.jessibuca = new window.Jessibuca(
Object.assign(
{
container: document.getElementById(this.id),
decoder: "/decoder.js",
isResize: false,
text: "",
loadingText: "疯狂加载中...",
debug: false,
operateBtns: {
fullscreen: this.showOperateBtns,
screenshot: this.showOperateBtns,
play: this.showOperateBtns,
audio: this.showOperateBtns
},
isNotMute: true,
timeout: 10
},
options
)
);
var _this = this;
this.jessibuca.on("pause", function () {
console.log("on pause");
_this.playing = false;
});
this.jessibuca.on("play", () => {
_this.playing = true;
_this.loaded = true;
});
},
play() {
if (this.videoUrl) {
let url = "ws://" + this.getQueryVariable("host") + "/jessica/" + this.getQueryVariable("stream") + ".flv";
console.log(url);
this.jessibuca.play(url).catch((err) => {
console.log(err);
});
}
},
getQueryVariable(variable) {
var query = this.videoUrl.split("?")[1];
if (query) {
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
}
return false;
},
pause() {
this.jessibuca.pause();
this.playing = false;
this.err = "";
this.performance = "";
},
volumeChange() {
this.jessibuca.setVolume(this.volume);
},
destroy() {
if (this.jessibuca) {
this.jessibuca.destroy();
}
this.create();
this.playing = false;
this.loaded = false;
this.performance = "";
},
restartPlay(type) {
this.destroy();
setTimeout(() => {
this.play();
}, 100);
}
}
};
</script>
<style>
.root {
display: flex;
place-content: center;
}
.container-shell {
width: 100%;
height: 100%;
}
#container {
background: rgba(13, 14, 27, 0.7);
}
.input {
display: flex;
align-items: center;
margin-top: 10px;
color: white;
place-content: stretch;
}
.input2 {
bottom: 0px;
}
.input input[type="input"] {
flex: auto;
}
.err {
position: absolute;
top: 40px;
left: 10px;
color: red;
}
.page {
background: url(/bg.jpg);
background-repeat: no-repeat;
background-position: top;
}
@media (max-width: 720px) {
#container {
width: 90vw;
height: 52.7vw;
}
}
</style>
直接在.vue文件中使用即可
父组件：
<CameraIframe :ref="item.id" class="camera" v-if="item.parentId" :id="item.id" :videoUrl="item.parentId"></CameraIframe>
