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

This commit is contained in:
xiaoxie 2022-04-23 11:20:00 +08:00
parent f1c4647ac3
commit 5eac7642e9

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'],
mounted() {
window.onerror = (msg) => {
// console.error(msg)
};
let paramUrl = decodeURIComponent(this.$route.params.url)
this.$nextTick(() => {
this.updatePlayerDomSize()
window.onresize = () => {
this.updatePlayerDomSize()
}
if (typeof (this.videoUrl) == "undefined") {
this.videoUrl = paramUrl;
}
this.btnDom = document.getElementById("buttonsBox");
console.log("初始化时的地址为: " + this.videoUrl)
this.play(this.videoUrl)
})
},
watch: {
videoUrl(newData, oldData) {
this.play(newData)
}, },
props: ['containerId','videoUrl', 'error', 'hasAudio', 'height'], immediate: true
mounted () { },
window.onerror = (msg) => { methods: {
// console.error(msg) updatePlayerDomSize() {
}; let dom = document.getElementById(this.containerId);
let paramUrl = decodeURIComponent(this.$route.params.url) const width = dom.parentNode.clientWidth
this.$nextTick(() =>{ dom.style.width = width + 'px';
let dom = document.getElementById(this.containerId); dom.style.height = (9 / 16) * width + "px";
if (dom.parentNode.clientHeight == 0) {
dom.style.height = (9/16 ) * dom.clientWidth + "px"
}
dom.style.height = dom.parentNode.clientHeight + "px";
dom.style.width = dom.parentNode.clientWidth + "px";
if (typeof (this.videoUrl) == "undefined") {
this.videoUrl = paramUrl;
}
this.btnDom = document.getElementById("buttonsBox");
console.log("初始化时的地址为: " + this.videoUrl)
this.play(this.videoUrl)
})
}, },
watch:{ create() {
videoUrl(newData, oldData){ let options = {};
this.play(newData) console.log(this.$refs[this.containerId])
console.log("hasAudio " + this.hasAudio)
this.jessibuca = new window.Jessibuca(Object.assign(
{
container: this.$refs[this.containerId],
videoBuffer: 0.2, //
isResize: true,
decoder: "static/js/jessibuca/decoder.js",
useMSE: false,
showBandwidth: false,
isFlv: true,
// text: "WVP-PRO",
// background: "static/images/zlm-logo.png",
loadingText: "加载中",
hasAudio: typeof (this.hasAudio) == "undefined" ? true : this.hasAudio,
debug: false,
supportDblclickFullscreen: false, //
operateBtns: {
fullscreen: false,
screenshot: false,
play: false,
audio: false,
recorder: false,
},
record: "record",
vod: this.vod,
forceNoOffscreen: this.forceNoOffscreen,
isNotMute: this.isNotMute,
}, },
immediate:true options
}, ));
methods: {
create(){
let options = {};
console.log(this.$refs[this.containerId])
console.log("hasAudio " + this.hasAudio)
this.jessibuca = new window.Jessibuca(Object.assign( let _this = this;
{ this.jessibuca.on("load", function () {
container: this.$refs[this.containerId], console.log("on load init");
videoBuffer: 0.2, // });
isResize: true,
decoder:"static/js/jessibuca/decoder.js",
useMSE: false,
showBandwidth: false,
isFlv: true,
// text: "WVP-PRO",
// background: "static/images/zlm-logo.png",
loadingText: "加载中",
hasAudio: typeof (this.hasAudio) =="undefined"? true: this.hasAudio,
debug: false,
supportDblclickFullscreen: false, //
operateBtns: {
fullscreen: false,
screenshot: false,
play: false,
audio: false,
recorder: false,
},
record: "record",
vod: this.vod,
forceNoOffscreen: this.forceNoOffscreen,
isNotMute: this.isNotMute,
},
options
));
let _this = this; this.jessibuca.on("log", function (msg) {
this.jessibuca.on("load", function () { console.log("on log", msg);
console.log("on load init"); });
}); this.jessibuca.on("record", function (msg) {
console.log("on record:", msg);
});
this.jessibuca.on("pause", function () {
_this.playing = false;
});
this.jessibuca.on("play", function () {
_this.playing = true;
});
this.jessibuca.on("fullscreen", function (msg) {
console.log("on fullscreen", msg);
_this.fullscreen = msg
});
this.jessibuca.on("log", function (msg) { this.jessibuca.on("mute", function (msg) {
console.log("on log", msg); console.log("on mute", msg);
}); _this.isNotMute = !msg;
this.jessibuca.on("record", function (msg) { });
console.log("on record:", msg); this.jessibuca.on("audioInfo", function (msg) {
}); // console.log("audioInfo", msg);
this.jessibuca.on("pause", function () { });
_this.playing = false;
});
this.jessibuca.on("play", function () {
_this.playing = true;
});
this.jessibuca.on("fullscreen", function (msg) {
console.log("on fullscreen", msg);
_this.fullscreen = msg
});
this.jessibuca.on("mute", function (msg) { this.jessibuca.on("videoInfo", function (msg) {
console.log("on mute", msg); // this.videoInfo = msg;
_this.isNotMute = !msg; console.log("videoInfo", msg);
});
this.jessibuca.on("audioInfo", function (msg) {
// console.log("audioInfo", msg);
});
this.jessibuca.on("videoInfo", function (msg) { });
// this.videoInfo = msg;
console.log("videoInfo", msg);
}); this.jessibuca.on("bps", function (bps) {
// console.log('bps', bps);
this.jessibuca.on("bps", function (bps) { });
// console.log('bps', bps); let _ts = 0;
this.jessibuca.on("timeUpdate", function (ts) {
// console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
_ts = ts;
});
}); this.jessibuca.on("videoInfo", function (info) {
let _ts = 0; console.log("videoInfo", info);
this.jessibuca.on("timeUpdate", function (ts) { });
// console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
_ts = ts;
});
this.jessibuca.on("videoInfo", function (info) { this.jessibuca.on("error", function (error) {
console.log("videoInfo", info); console.log("error", error);
}); });
this.jessibuca.on("error", function (error) { this.jessibuca.on("timeout", function () {
console.log("error", error); console.log("timeout");
}); });
this.jessibuca.on("timeout", function () { this.jessibuca.on('start', function () {
console.log("timeout"); console.log('start');
}); })
this.jessibuca.on('start', function () { this.jessibuca.on("performance", function (performance) {
console.log('start'); let show = "卡顿";
}) if (performance === 2) {
show = "非常流畅";
this.jessibuca.on("performance", function (performance) { } else if (performance === 1) {
let show = "卡顿"; show = "流畅";
if (performance === 2) {
show = "非常流畅";
} else if (performance === 1) {
show = "流畅";
}
_this.performance = show;
});
this.jessibuca.on('buffer', function (buffer) {
// console.log('buffer', buffer);
})
this.jessibuca.on('stats', function (stats) {
// console.log('stats', stats);
})
this.jessibuca.on('kBps', function (kBps) {
_this.kBps = Math.round(kBps);
});
// PTS
this.jessibuca.on('videoFrame', function () {
})
//
this.jessibuca.on('metadata', function () {
});
},
resize(){
if (this.jessibuca){
this.jessibuca.resize()
this.$nextTick(() =>{
let dom = document.getElementById(this.containerId);
if (dom.parentNode.clientHeight == 0) {
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;
this.playing = false;
this.err = "";
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;
} }
_this.performance = show;
});
this.jessibuca.on('buffer', function (buffer) {
// console.log('buffer', buffer);
})
this.jessibuca.on('stats', function (stats) {
// console.log('stats', stats);
})
this.jessibuca.on('kBps', function (kBps) {
_this.kBps = Math.round(kBps);
});
// PTS
this.jessibuca.on('videoFrame', function () {
})
//
this.jessibuca.on('metadata', function () {
});
}, },
destroyed() { resize() {
if (this.jessibuca) {
this.jessibuca.resize()
this.$nextTick(() => {
let dom = document.getElementById(this.containerId);
if (dom.parentNode.clientHeight == 0) {
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) { 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>