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

动态计算播放器尺寸，保持16：9比例，避免出现黑框或固定大小无法缩放

pull/447/head
xiaoxie 3 years ago
parent
2bc43f4262
commit
33eec2b68f
1 changed files with 267 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. 527
      web_src/src/components/common/jessibuca.vue

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

@ -1,5 +1,6 @@
<template> <template>
<div :id="containerId" :ref="containerId" style="width: 100%;height: auto; background-color: #000" @dblclick="fullscreenSwich"> <div :id="containerId" :ref="containerId" style="width: 100%;height: auto; background-color: #000"
@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 +10,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 +25,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