fajiao
/
wvp-GB28181-pro
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge pull request #447 from hotcoffie/wvp-28181-2.0 

之前播放器窗口缩放时大小很奇怪，还有黑色底色
pull/451/head
648540858 3 years ago
committed by GitHub
parent
2bc43f4262 e7ab983f94
commit
9ab99edc1e
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 266 additions and 260 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 526
      web_src/src/components/common/jessibuca.vue

526
web_src/src/components/common/jessibuca.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :id="containerId" :ref="containerId" style="width: 100%;height: auto; background-color: #000" @dblclick="fullscreenSwich"> <div :id="containerId" :ref="containerId" @dblclick="fullscreenSwich">
<div class="buttons-box" id="buttonsBox"> <div class="buttons-box" id="buttonsBox">
<div class="buttons-box-left"> <div class="buttons-box-left">
<i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i> <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i>
@ -9,10 +9,11 @@
<i v-if="!isNotMute" class="iconfont icon-audio-mute jessibuca-btn" @click="jessibuca.cancelMute()"></i> <i v-if="!isNotMute" class="iconfont icon-audio-mute jessibuca-btn" @click="jessibuca.cancelMute()"></i>
</div> </div>
<div class="buttons-box-right"> <div class="buttons-box-right">
<span class="jessibuca-btn">{{kBps}} kb/s</span> <span class="jessibuca-btn">{{ kBps }} kb/s</span>
<!-- <i class="iconfont icon-file-record1 jessibuca-btn"></i>--> <!-- <i class="iconfont icon-file-record1 jessibuca-btn"></i>-->
<!-- <i class="iconfont icon-xiangqing2 jessibuca-btn" ></i>--> <!-- <i class="iconfont icon-xiangqing2 jessibuca-btn" ></i>-->
<i class="iconfont icon-camera1196054easyiconnet jessibuca-btn" @click="jessibuca.screenshot('截图','png',0.5)" style="font-size: 1rem !important"></i> <i class="iconfont icon-camera1196054easyiconnet jessibuca-btn" @click="jessibuca.screenshot('截图','png',0.5)"
style="font-size: 1rem !important"></i>
<i class="iconfont icon-shuaxin11 jessibuca-btn" @click="playBtnClick"></i> <i class="iconfont icon-shuaxin11 jessibuca-btn" @click="playBtnClick"></i>
<i v-if="!fullscreen" class="iconfont icon-weibiaoti10 jessibuca-btn" @click="fullscreenSwich"></i> <i v-if="!fullscreen" class="iconfont icon-weibiaoti10 jessibuca-btn" @click="fullscreenSwich"></i>
<i v-if="fullscreen" class="iconfont icon-weibiaoti11 jessibuca-btn" @click="fullscreenSwich"></i> <i v-if="fullscreen" class="iconfont icon-weibiaoti11 jessibuca-btn" @click="fullscreenSwich"></i>
@ -23,294 +24,299 @@
<script> <script>
export default { export default {
name: 'jessibuca', name: 'jessibuca',
data() { data() {
return { return {
jessibuca: null, jessibuca: null,
playing: false, playing: false,
isNotMute: false, isNotMute: false,
quieting: false, quieting: false,
fullscreen: false, fullscreen: false,
loaded: false, // mute loaded: false, // mute
speed: 0, speed: 0,
performance: "", // 工作情况 performance: "", // 工作情况
kBps: 0, kBps: 0,
btnDom: null, btnDom: null,
videoInfo: null, videoInfo: null,
volume: 1, volume: 1,
rotate: 0, rotate: 0,
vod: true, // 点播 vod: true, // 点播
forceNoOffscreen: false, forceNoOffscreen: false,
}; };
}, },
props: ['containerId','videoUrl', 'error', 'hasAudio', 'height'], props: ['containerId', 'videoUrl', 'error', 'hasAudio', 'height'],
mounted () { mounted() {
window.onerror = (msg) => { window.onerror = (msg) => {
// console.error(msg) // console.error(msg)
}; };
let paramUrl = decodeURIComponent(this.$route.params.url) let paramUrl = decodeURIComponent(this.$route.params.url)
this.$nextTick(() =>{ this.$nextTick(() => {
let dom = document.getElementById(this.containerId); this.updatePlayerDomSize()
if (dom.parentNode.clientHeight == 0) { window.onresize = () => {
dom.style.height = (9/16 ) * dom.clientWidth + "px" this.updatePlayerDomSize()
} }
dom.style.height = dom.parentNode.clientHeight + "px"; if (typeof (this.videoUrl) == "undefined") {
dom.style.width = dom.parentNode.clientWidth + "px"; this.videoUrl = paramUrl;
}
if (typeof (this.videoUrl) == "undefined") { this.btnDom = document.getElementById("buttonsBox");
this.videoUrl = paramUrl; console.log("初始化时的地址为: " + this.videoUrl)
} this.play(this.videoUrl)
this.btnDom = document.getElementById("buttonsBox"); })
console.log("初始化时的地址为: " + this.videoUrl) },
this.play(this.videoUrl) watch: {
}) videoUrl(newData, oldData) {
this.play(newData)
}, },
watch:{ immediate: true
videoUrl(newData, oldData){ },
this.play(newData) methods: {
}, updatePlayerDomSize() {
immediate:true let dom = document.getElementById(this.containerId);
const width = dom.parentNode.clientWidth
dom.style.width = width + 'px';
dom.style.height = (9 / 16) * width + "px";
}, },
methods: { create() {
create(){ let options = {};
let options = {}; console.log(this.$refs[this.containerId])
console.log(this.$refs[this.containerId]) console.log("hasAudio " + this.hasAudio)
console.log("hasAudio " + this.hasAudio)
this.jessibuca = new window.Jessibuca(Object.assign( this.jessibuca = new window.Jessibuca(Object.assign(
{ {
container: this.$refs[this.containerId], container: this.$refs[this.containerId],
videoBuffer: 0.2, // 最大缓冲时长，单位秒 videoBuffer: 0.2, // 最大缓冲时长，单位秒
isResize: true, isResize: true,
decoder:"static/js/jessibuca/decoder.js", decoder: "static/js/jessibuca/decoder.js",
useMSE: false, useMSE: false,
showBandwidth: false, showBandwidth: false,
isFlv: true, isFlv: true,
// text: "WVP-PRO", // text: "WVP-PRO",
// background: "static/images/zlm-logo.png", // background: "static/images/zlm-logo.png",
loadingText: "加载中", loadingText: "加载中",
hasAudio: typeof (this.hasAudio) =="undefined"? true: this.hasAudio, hasAudio: typeof (this.hasAudio) == "undefined" ? true : this.hasAudio,
debug: false, debug: false,
supportDblclickFullscreen: false, // 是否支持屏幕的双击事件，触发全屏，取消全屏事件。 supportDblclickFullscreen: false, // 是否支持屏幕的双击事件，触发全屏，取消全屏事件。
operateBtns: { operateBtns: {
fullscreen: false, fullscreen: false,
screenshot: false, screenshot: false,
play: false, play: false,
audio: false, audio: false,
recorder: false, recorder: false,
}, },
record: "record", record: "record",
vod: this.vod, vod: this.vod,
forceNoOffscreen: this.forceNoOffscreen, forceNoOffscreen: this.forceNoOffscreen,
isNotMute: this.isNotMute, isNotMute: this.isNotMute,
}, },
options options
)); ));
let _this = this; let _this = this;
this.jessibuca.on("load", function () { this.jessibuca.on("load", function () {
console.log("on load init"); console.log("on load init");
}); });
this.jessibuca.on("log", function (msg) { this.jessibuca.on("log", function (msg) {
console.log("on log", msg); console.log("on log", msg);
}); });
this.jessibuca.on("record", function (msg) { this.jessibuca.on("record", function (msg) {
console.log("on record:", msg); console.log("on record:", msg);
}); });
this.jessibuca.on("pause", function () { this.jessibuca.on("pause", function () {
_this.playing = false; _this.playing = false;
}); });
this.jessibuca.on("play", function () { this.jessibuca.on("play", function () {
_this.playing = true; _this.playing = true;
}); });
this.jessibuca.on("fullscreen", function (msg) { this.jessibuca.on("fullscreen", function (msg) {
console.log("on fullscreen", msg); console.log("on fullscreen", msg);
_this.fullscreen = msg _this.fullscreen = msg
}); });
this.jessibuca.on("mute", function (msg) { this.jessibuca.on("mute", function (msg) {
console.log("on mute", msg); console.log("on mute", msg);
_this.isNotMute = !msg; _this.isNotMute = !msg;
}); });
this.jessibuca.on("audioInfo", function (msg) { this.jessibuca.on("audioInfo", function (msg) {
// console.log("audioInfo", msg); // console.log("audioInfo", msg);
}); });
this.jessibuca.on("videoInfo", function (msg) { this.jessibuca.on("videoInfo", function (msg) {
// this.videoInfo = msg; // this.videoInfo = msg;
console.log("videoInfo", msg); console.log("videoInfo", msg);
}); });
this.jessibuca.on("bps", function (bps) { this.jessibuca.on("bps", function (bps) {
// console.log('bps', bps); // console.log('bps', bps);
}); });
let _ts = 0; let _ts = 0;
this.jessibuca.on("timeUpdate", function (ts) { this.jessibuca.on("timeUpdate", function (ts) {
// console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts); // console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
_ts = ts; _ts = ts;
}); });
this.jessibuca.on("videoInfo", function (info) { this.jessibuca.on("videoInfo", function (info) {
console.log("videoInfo", info); console.log("videoInfo", info);
}); });
this.jessibuca.on("error", function (error) { this.jessibuca.on("error", function (error) {
console.log("error", error); console.log("error", error);
}); });
this.jessibuca.on("timeout", function () { this.jessibuca.on("timeout", function () {
console.log("timeout"); console.log("timeout");
}); });
this.jessibuca.on('start', function () { this.jessibuca.on('start', function () {
console.log('start'); console.log('start');
}) })
this.jessibuca.on("performance", function (performance) { this.jessibuca.on("performance", function (performance) {
let show = "卡顿"; let show = "卡顿";
if (performance === 2) { if (performance === 2) {
show = "非常流畅"; show = "非常流畅";
} else if (performance === 1) { } else if (performance === 1) {
show = "流畅"; show = "流畅";
} }
_this.performance = show; _this.performance = show;
}); });
this.jessibuca.on('buffer', function (buffer) { this.jessibuca.on('buffer', function (buffer) {
// console.log('buffer', buffer); // console.log('buffer', buffer);
}) })
this.jessibuca.on('stats', function (stats) { this.jessibuca.on('stats', function (stats) {
// console.log('stats', stats); // console.log('stats', stats);
}) })
this.jessibuca.on('kBps', function (kBps) { this.jessibuca.on('kBps', function (kBps) {
_this.kBps = Math.round(kBps); _this.kBps = Math.round(kBps);
}); });
// 显示时间戳 PTS // 显示时间戳 PTS
this.jessibuca.on('videoFrame', function () { this.jessibuca.on('videoFrame', function () {
}) })
// //
this.jessibuca.on('metadata', function () { this.jessibuca.on('metadata', function () {
}); });
}, },
resize(){ resize() {
if (this.jessibuca){ if (this.jessibuca) {
this.jessibuca.resize() this.jessibuca.resize()
this.$nextTick(() =>{ this.$nextTick(() => {
let dom = document.getElementById(this.containerId); let dom = document.getElementById(this.containerId);
if (dom.parentNode.clientHeight == 0) { if (dom.parentNode.clientHeight == 0) {
dom.style.height = (9/16 ) * dom.clientWidth + "px" dom.style.height = (9 / 16) * dom.clientWidth + "px"
}
dom.style.height = dom.parentNode.clientHeight + "px";
dom.style.width = dom.parentNode.clientWidth + "px";
})
}
},
playBtnClick: function (event){
this.play(this.videoUrl)
},
play: function (url) {
console.log(url)
if (this.jessibuca) {
this.destroy();
}
this.create();
this.jessibuca.on("play", () => {
this.playing = true;
this.loaded = true;
this.quieting = this.jessibuca.quieting;
});
if (this.jessibuca.hasLoaded()) {
this.jessibuca.play(url);
} else {
this.jessibuca.on("load", () => {
console.log("load 播放")
this.jessibuca.play(url);
});
}
},
pause: function () {
if (this.jessibuca) {
this.jessibuca.pause();
}
this.playing = false;
this.err = "";
this.performance = "";
},
destroy: function () {
if (this.jessibuca) {
this.jessibuca.destroy();
}
if (document.getElementById("buttonsBox") == null) {
document.getElementById("container").appendChild(this.btnDom)
} }
this.jessibuca = null; dom.style.height = dom.parentNode.clientHeight + "px";
this.playing = false; dom.style.width = dom.parentNode.clientWidth + "px";
this.err = ""; })
this.performance = ""; }
},
}, playBtnClick: function (event) {
eventcallbacK: function(type, message) { this.play(this.videoUrl)
// console.log("player 事件回调") },
// console.log(type) play: function (url) {
// console.log(message) console.log(url)
}, if (this.jessibuca) {
fullscreenSwich: function (){ this.destroy();
let isFull = this.isFullscreen() }
this.jessibuca.setFullscreen(!isFull) this.create();
this.fullscreen = !isFull; this.jessibuca.on("play", () => {
}, this.playing = true;
isFullscreen: function (){ this.loaded = true;
return document.fullscreenElement || this.quieting = this.jessibuca.quieting;
document.msFullscreenElement || });
document.mozFullScreenElement || if (this.jessibuca.hasLoaded()) {
document.webkitFullscreenElement || false; this.jessibuca.play(url);
} } else {
this.jessibuca.on("load", () => {
console.log("load 播放")
this.jessibuca.play(url);
});
}
},
pause: function () {
if (this.jessibuca) {
this.jessibuca.pause();
}
this.playing = false;
this.err = "";
this.performance = "";
}, },
destroyed() { destroy: function () {
if (this.jessibuca) { if (this.jessibuca) {
this.jessibuca.destroy(); this.jessibuca.destroy();
} }
if (document.getElementById("buttonsBox") == null) {
document.getElementById("container").appendChild(this.btnDom)
}
this.jessibuca = null;
this.playing = false; this.playing = false;
this.loaded = false; this.err = "";
this.performance = ""; this.performance = "";
},
eventcallbacK: function (type, message) {
// console.log("player 事件回调")
// console.log(type)
// console.log(message)
},
fullscreenSwich: function () {
let isFull = this.isFullscreen()
this.jessibuca.setFullscreen(!isFull)
this.fullscreen = !isFull;
}, },
isFullscreen: function () {
return document.fullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement || false;
}
},
destroyed() {
if (this.jessibuca) {
this.jessibuca.destroy();
}
this.playing = false;
this.loaded = false;
this.performance = "";
},
} }
</script> </script>
<style> <style>
.buttons-box{ .buttons-box {
width: 100%; width: 100%;
height: 28px; height: 28px;
background-color: rgba(43, 51, 63, 0.7); background-color: rgba(43, 51, 63, 0.7);
position: absolute; position: absolute;
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
left: 0; left: 0;
bottom: 0; bottom: 0;
user-select: none; user-select: none;
z-index: 10; z-index: 10;
} }
.jessibuca-btn{
width: 20px; .jessibuca-btn {
color: rgb(255, 255, 255); width: 20px;
line-height: 27px; color: rgb(255, 255, 255);
margin: 0px 10px; line-height: 27px;
padding: 0px 2px; margin: 0px 10px;
cursor: pointer; padding: 0px 2px;
text-align: center; cursor: pointer;
font-size: 0.8rem !important; text-align: center;
} font-size: 0.8rem !important;
.buttons-box-right { }
position: absolute;
right: 0; .buttons-box-right {
} position: absolute;
right: 0;
}
</style> </style>

Write Preview
Loading…
Cancel
Save