guzijian / wvp-GB28181-pro · Commits

Commit 9ab99edc1eb9a255f2aa6cfd4c34fdd4565952dc

Authored by 648540858
Committed by GitHub
2 parents 2bc43f42 e7ab983f

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

之前播放器窗口缩放时大小很奇怪，还有黑色底色
Inline Side-by-side
Showing 1 changed file with 266 additions and 260 deletions
web_src/src/components/common/jessibuca.vue
  View file @9ab99ed
1 <template> 1 <template>
2 - <div :id="containerId" :ref="containerId" style="width: 100%;height: auto; background-color: #000" @dblclick="fullscreenSwich"> 2 + <div :id="containerId" :ref="containerId" @dblclick="fullscreenSwich">
3 <div class="buttons-box" id="buttonsBox"> 3 <div class="buttons-box" id="buttonsBox">
4 <div class="buttons-box-left"> 4 <div class="buttons-box-left">
5 <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i> 5 <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i>
@@ -9,10 +9,11 @@ @@ -9,10 +9,11 @@
9 <i v-if="!isNotMute" class="iconfont icon-audio-mute jessibuca-btn" @click="jessibuca.cancelMute()"></i> 9 <i v-if="!isNotMute" class="iconfont icon-audio-mute jessibuca-btn" @click="jessibuca.cancelMute()"></i>
10 </div> 10 </div>
11 <div class="buttons-box-right"> 11 <div class="buttons-box-right">
12 - <span class="jessibuca-btn">{{kBps}} kb/s</span> 12 + <span class="jessibuca-btn">{{ kBps }} kb/s</span>
13 <!-- <i class="iconfont icon-file-record1 jessibuca-btn"></i>--> 13 <!-- <i class="iconfont icon-file-record1 jessibuca-btn"></i>-->
14 <!-- <i class="iconfont icon-xiangqing2 jessibuca-btn" ></i>--> 14 <!-- <i class="iconfont icon-xiangqing2 jessibuca-btn" ></i>-->
15 - <i class="iconfont icon-camera1196054easyiconnet jessibuca-btn" @click="jessibuca.screenshot('截图','png',0.5)" style="font-size: 1rem !important"></i> 15 + <i class="iconfont icon-camera1196054easyiconnet jessibuca-btn" @click="jessibuca.screenshot('截图','png',0.5)"
  16 + style="font-size: 1rem !important"></i>
16 <i class="iconfont icon-shuaxin11 jessibuca-btn" @click="playBtnClick"></i> 17 <i class="iconfont icon-shuaxin11 jessibuca-btn" @click="playBtnClick"></i>
17 <i v-if="!fullscreen" class="iconfont icon-weibiaoti10 jessibuca-btn" @click="fullscreenSwich"></i> 18 <i v-if="!fullscreen" class="iconfont icon-weibiaoti10 jessibuca-btn" @click="fullscreenSwich"></i>
18 <i v-if="fullscreen" class="iconfont icon-weibiaoti11 jessibuca-btn" @click="fullscreenSwich"></i> 19 <i v-if="fullscreen" class="iconfont icon-weibiaoti11 jessibuca-btn" @click="fullscreenSwich"></i>
@@ -23,294 +24,299 @@ @@ -23,294 +24,299 @@
23 24
24 <script> 25 <script>
25 export default { 26 export default {
26 - name: 'jessibuca',  
27 - data() {  
28 - return {  
29 - jessibuca: null,  
30 - playing: false,  
31 - isNotMute: false,  
32 - quieting: false,  
33 - fullscreen: false,  
34 - loaded: false, // mute  
35 - speed: 0,  
36 - performance: "", // 工作情况  
37 - kBps: 0,  
38 - btnDom: null,  
39 - videoInfo: null,  
40 - volume: 1,  
41 - rotate: 0,  
42 - vod: true, // 点播  
43 - forceNoOffscreen: false,  
44 - };  
45 - },  
46 - props: ['containerId','videoUrl', 'error', 'hasAudio', 'height'],  
47 - mounted () {  
48 - window.onerror = (msg) => {  
49 - // console.error(msg)  
50 - };  
51 - let paramUrl = decodeURIComponent(this.$route.params.url)  
52 - this.$nextTick(() =>{  
53 - let dom = document.getElementById(this.containerId);  
54 - if (dom.parentNode.clientHeight == 0) {  
55 - dom.style.height = (9/16 ) * dom.clientWidth + "px"  
56 - }  
57 - dom.style.height = dom.parentNode.clientHeight + "px";  
58 - dom.style.width = dom.parentNode.clientWidth + "px";  
59 -  
60 - if (typeof (this.videoUrl) == "undefined") {  
61 - this.videoUrl = paramUrl;  
62 - }  
63 - this.btnDom = document.getElementById("buttonsBox");  
64 - console.log("初始化时的地址为: " + this.videoUrl)  
65 - this.play(this.videoUrl)  
66 - }) 27 + name: 'jessibuca',
  28 + data() {
  29 + return {
  30 + jessibuca: null,
  31 + playing: false,
  32 + isNotMute: false,
  33 + quieting: false,
  34 + fullscreen: false,
  35 + loaded: false, // mute
  36 + speed: 0,
  37 + performance: "", // 工作情况
  38 + kBps: 0,
  39 + btnDom: null,
  40 + videoInfo: null,
  41 + volume: 1,
  42 + rotate: 0,
  43 + vod: true, // 点播
  44 + forceNoOffscreen: false,
  45 + };
  46 + },
  47 + props: ['containerId', 'videoUrl', 'error', 'hasAudio', 'height'],
  48 + mounted() {
  49 + window.onerror = (msg) => {
  50 + // console.error(msg)
  51 + };
  52 + let paramUrl = decodeURIComponent(this.$route.params.url)
  53 + this.$nextTick(() => {
  54 + this.updatePlayerDomSize()
  55 + window.onresize = () => {
  56 + this.updatePlayerDomSize()
  57 + }
  58 + if (typeof (this.videoUrl) == "undefined") {
  59 + this.videoUrl = paramUrl;
  60 + }
  61 + this.btnDom = document.getElementById("buttonsBox");
  62 + console.log("初始化时的地址为: " + this.videoUrl)
  63 + this.play(this.videoUrl)
  64 + })
  65 + },
  66 + watch: {
  67 + videoUrl(newData, oldData) {
  68 + this.play(newData)
67 }, 69 },
68 - watch:{  
69 - videoUrl(newData, oldData){  
70 - this.play(newData)  
71 - },  
72 - immediate:true 70 + immediate: true
  71 + },
  72 + methods: {
  73 + updatePlayerDomSize() {
  74 + let dom = document.getElementById(this.containerId);
  75 + const width = dom.parentNode.clientWidth
  76 + dom.style.width = width + 'px';
  77 + dom.style.height = (9 / 16) * width + "px";
73 }, 78 },
74 - methods: {  
75 - create(){  
76 - let options = {};  
77 - console.log(this.$refs[this.containerId])  
78 - console.log("hasAudio " + this.hasAudio) 79 + create() {
  80 + let options = {};
  81 + console.log(this.$refs[this.containerId])
  82 + console.log("hasAudio " + this.hasAudio)
79 83
80 - this.jessibuca = new window.Jessibuca(Object.assign(  
81 - {  
82 - container: this.$refs[this.containerId],  
83 - videoBuffer: 0.2, // 最大缓冲时长，单位秒  
84 - isResize: true,  
85 - decoder:"static/js/jessibuca/decoder.js",  
86 - useMSE: false,  
87 - showBandwidth: false,  
88 - isFlv: true,  
89 - // text: "WVP-PRO",  
90 - // background: "static/images/zlm-logo.png",  
91 - loadingText: "加载中",  
92 - hasAudio: typeof (this.hasAudio) =="undefined"? true: this.hasAudio,  
93 - debug: false,  
94 - supportDblclickFullscreen: false, // 是否支持屏幕的双击事件，触发全屏，取消全屏事件。  
95 - operateBtns: {  
96 - fullscreen: false,  
97 - screenshot: false,  
98 - play: false,  
99 - audio: false,  
100 - recorder: false,  
101 - },  
102 - record: "record",  
103 - vod: this.vod,  
104 - forceNoOffscreen: this.forceNoOffscreen,  
105 - isNotMute: this.isNotMute,  
106 - },  
107 - options  
108 - )); 84 + this.jessibuca = new window.Jessibuca(Object.assign(
  85 + {
  86 + container: this.$refs[this.containerId],
  87 + videoBuffer: 0.2, // 最大缓冲时长，单位秒
  88 + isResize: true,
  89 + decoder: "static/js/jessibuca/decoder.js",
  90 + useMSE: false,
  91 + showBandwidth: false,
  92 + isFlv: true,
  93 + // text: "WVP-PRO",
  94 + // background: "static/images/zlm-logo.png",
  95 + loadingText: "加载中",
  96 + hasAudio: typeof (this.hasAudio) == "undefined" ? true : this.hasAudio,
  97 + debug: false,
  98 + supportDblclickFullscreen: false, // 是否支持屏幕的双击事件，触发全屏，取消全屏事件。
  99 + operateBtns: {
  100 + fullscreen: false,
  101 + screenshot: false,
  102 + play: false,
  103 + audio: false,
  104 + recorder: false,
  105 + },
  106 + record: "record",
  107 + vod: this.vod,
  108 + forceNoOffscreen: this.forceNoOffscreen,
  109 + isNotMute: this.isNotMute,
  110 + },
  111 + options
  112 + ));
109 113
110 - let _this = this;  
111 - this.jessibuca.on("load", function () {  
112 - console.log("on load init");  
113 - }); 114 + let _this = this;
  115 + this.jessibuca.on("load", function () {
  116 + console.log("on load init");
  117 + });
114 118
115 - this.jessibuca.on("log", function (msg) {  
116 - console.log("on log", msg);  
117 - });  
118 - this.jessibuca.on("record", function (msg) {  
119 - console.log("on record:", msg);  
120 - });  
121 - this.jessibuca.on("pause", function () {  
122 - _this.playing = false;  
123 - });  
124 - this.jessibuca.on("play", function () {  
125 - _this.playing = true;  
126 - });  
127 - this.jessibuca.on("fullscreen", function (msg) {  
128 - console.log("on fullscreen", msg);  
129 - _this.fullscreen = msg  
130 - }); 119 + this.jessibuca.on("log", function (msg) {
  120 + console.log("on log", msg);
  121 + });
  122 + this.jessibuca.on("record", function (msg) {
  123 + console.log("on record:", msg);
  124 + });
  125 + this.jessibuca.on("pause", function () {
  126 + _this.playing = false;
  127 + });
  128 + this.jessibuca.on("play", function () {
  129 + _this.playing = true;
  130 + });
  131 + this.jessibuca.on("fullscreen", function (msg) {
  132 + console.log("on fullscreen", msg);
  133 + _this.fullscreen = msg
  134 + });
131 135
132 - this.jessibuca.on("mute", function (msg) {  
133 - console.log("on mute", msg);  
134 - _this.isNotMute = !msg;  
135 - });  
136 - this.jessibuca.on("audioInfo", function (msg) {  
137 - // console.log("audioInfo", msg);  
138 - }); 136 + this.jessibuca.on("mute", function (msg) {
  137 + console.log("on mute", msg);
  138 + _this.isNotMute = !msg;
  139 + });
  140 + this.jessibuca.on("audioInfo", function (msg) {
  141 + // console.log("audioInfo", msg);
  142 + });
139 143
140 - this.jessibuca.on("videoInfo", function (msg) {  
141 - // this.videoInfo = msg;  
142 - console.log("videoInfo", msg); 144 + this.jessibuca.on("videoInfo", function (msg) {
  145 + // this.videoInfo = msg;
  146 + console.log("videoInfo", msg);
143 147
144 - }); 148 + });
145 149
146 - this.jessibuca.on("bps", function (bps) {  
147 - // console.log('bps', bps); 150 + this.jessibuca.on("bps", function (bps) {
  151 + // console.log('bps', bps);
148 152
149 - });  
150 - let _ts = 0;  
151 - this.jessibuca.on("timeUpdate", function (ts) {  
152 - // console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);  
153 - _ts = ts;  
154 - }); 153 + });
  154 + let _ts = 0;
  155 + this.jessibuca.on("timeUpdate", function (ts) {
  156 + // console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
  157 + _ts = ts;
  158 + });
155 159
156 - this.jessibuca.on("videoInfo", function (info) {  
157 - console.log("videoInfo", info);  
158 - }); 160 + this.jessibuca.on("videoInfo", function (info) {
  161 + console.log("videoInfo", info);
  162 + });
159 163
160 - this.jessibuca.on("error", function (error) {  
161 - console.log("error", error);  
162 - }); 164 + this.jessibuca.on("error", function (error) {
  165 + console.log("error", error);
  166 + });
163 167
164 - this.jessibuca.on("timeout", function () {  
165 - console.log("timeout");  
166 - }); 168 + this.jessibuca.on("timeout", function () {
  169 + console.log("timeout");
  170 + });
167 171
168 - this.jessibuca.on('start', function () {  
169 - console.log('start');  
170 - }) 172 + this.jessibuca.on('start', function () {
  173 + console.log('start');
  174 + })
171 175
172 - this.jessibuca.on("performance", function (performance) {  
173 - let show = "卡顿";  
174 - if (performance === 2) {  
175 - show = "非常流畅";  
176 - } else if (performance === 1) {  
177 - show = "流畅";  
178 - }  
179 - _this.performance = show;  
180 - });  
181 - this.jessibuca.on('buffer', function (buffer) {  
182 - // console.log('buffer', buffer);  
183 - }) 176 + this.jessibuca.on("performance", function (performance) {
  177 + let show = "卡顿";
  178 + if (performance === 2) {
  179 + show = "非常流畅";
  180 + } else if (performance === 1) {
  181 + show = "流畅";
  182 + }
  183 + _this.performance = show;
  184 + });
  185 + this.jessibuca.on('buffer', function (buffer) {
  186 + // console.log('buffer', buffer);
  187 + })
184 188
185 - this.jessibuca.on('stats', function (stats) {  
186 - // console.log('stats', stats);  
187 - }) 189 + this.jessibuca.on('stats', function (stats) {
  190 + // console.log('stats', stats);
  191 + })
188 192
189 - this.jessibuca.on('kBps', function (kBps) {  
190 - _this.kBps = Math.round(kBps);  
191 - }); 193 + this.jessibuca.on('kBps', function (kBps) {
  194 + _this.kBps = Math.round(kBps);
  195 + });
192 196
193 - // 显示时间戳 PTS  
194 - this.jessibuca.on('videoFrame', function () { 197 + // 显示时间戳 PTS
  198 + this.jessibuca.on('videoFrame', function () {
195 199
196 - }) 200 + })
197 201
198 - //  
199 - this.jessibuca.on('metadata', function () { 202 + //
  203 + this.jessibuca.on('metadata', function () {
200 204
201 - });  
202 - },  
203 - resize(){  
204 - if (this.jessibuca){  
205 - this.jessibuca.resize()  
206 - this.$nextTick(() =>{  
207 - let dom = document.getElementById(this.containerId);  
208 - if (dom.parentNode.clientHeight == 0) {  
209 - dom.style.height = (9/16 ) * dom.clientWidth + "px"  
210 - }  
211 - dom.style.height = dom.parentNode.clientHeight + "px";  
212 - dom.style.width = dom.parentNode.clientWidth + "px";  
213 - })  
214 - }  
215 - },  
216 - playBtnClick: function (event){  
217 - this.play(this.videoUrl)  
218 - },  
219 - play: function (url) {  
220 - console.log(url)  
221 - if (this.jessibuca) {  
222 - this.destroy();  
223 - }  
224 - this.create();  
225 - this.jessibuca.on("play", () => {  
226 - this.playing = true;  
227 - this.loaded = true;  
228 - this.quieting = this.jessibuca.quieting;  
229 - });  
230 - if (this.jessibuca.hasLoaded()) {  
231 - this.jessibuca.play(url);  
232 - } else {  
233 - this.jessibuca.on("load", () => {  
234 - console.log("load 播放")  
235 - this.jessibuca.play(url);  
236 - });  
237 - }  
238 - },  
239 - pause: function () {  
240 - if (this.jessibuca) {  
241 - this.jessibuca.pause();  
242 - }  
243 - this.playing = false;  
244 - this.err = "";  
245 - this.performance = "";  
246 - },  
247 - destroy: function () {  
248 - if (this.jessibuca) {  
249 - this.jessibuca.destroy();  
250 - }  
251 - if (document.getElementById("buttonsBox") == null) {  
252 - document.getElementById("container").appendChild(this.btnDom) 205 + });
  206 + },
  207 + resize() {
  208 + if (this.jessibuca) {
  209 + this.jessibuca.resize()
  210 + this.$nextTick(() => {
  211 + let dom = document.getElementById(this.containerId);
  212 + if (dom.parentNode.clientHeight == 0) {
  213 + dom.style.height = (9 / 16) * dom.clientWidth + "px"
253 } 214 }
254 - this.jessibuca = null;  
255 - this.playing = false;  
256 - this.err = "";  
257 - this.performance = "";  
258 -  
259 - },  
260 - eventcallbacK: function(type, message) {  
261 - // console.log("player 事件回调")  
262 - // console.log(type)  
263 - // console.log(message)  
264 - },  
265 - fullscreenSwich: function (){  
266 - let isFull = this.isFullscreen()  
267 - this.jessibuca.setFullscreen(!isFull)  
268 - this.fullscreen = !isFull;  
269 - },  
270 - isFullscreen: function (){  
271 - return document.fullscreenElement ||  
272 - document.msFullscreenElement ||  
273 - document.mozFullScreenElement ||  
274 - document.webkitFullscreenElement || false;  
275 - } 215 + dom.style.height = dom.parentNode.clientHeight + "px";
  216 + dom.style.width = dom.parentNode.clientWidth + "px";
  217 + })
  218 + }
  219 + },
  220 + playBtnClick: function (event) {
  221 + this.play(this.videoUrl)
  222 + },
  223 + play: function (url) {
  224 + console.log(url)
  225 + if (this.jessibuca) {
  226 + this.destroy();
  227 + }
  228 + this.create();
  229 + this.jessibuca.on("play", () => {
  230 + this.playing = true;
  231 + this.loaded = true;
  232 + this.quieting = this.jessibuca.quieting;
  233 + });
  234 + if (this.jessibuca.hasLoaded()) {
  235 + this.jessibuca.play(url);
  236 + } else {
  237 + this.jessibuca.on("load", () => {
  238 + console.log("load 播放")
  239 + this.jessibuca.play(url);
  240 + });
  241 + }
  242 + },
  243 + pause: function () {
  244 + if (this.jessibuca) {
  245 + this.jessibuca.pause();
  246 + }
  247 + this.playing = false;
  248 + this.err = "";
  249 + this.performance = "";
276 }, 250 },
277 - destroyed() { 251 + destroy: function () {
278 if (this.jessibuca) { 252 if (this.jessibuca) {
279 this.jessibuca.destroy(); 253 this.jessibuca.destroy();
280 } 254 }
  255 + if (document.getElementById("buttonsBox") == null) {
  256 + document.getElementById("container").appendChild(this.btnDom)
  257 + }
  258 + this.jessibuca = null;
281 this.playing = false; 259 this.playing = false;
282 - this.loaded = false; 260 + this.err = "";
283 this.performance = ""; 261 this.performance = "";
  262 +
  263 + },
  264 + eventcallbacK: function (type, message) {
  265 + // console.log("player 事件回调")
  266 + // console.log(type)
  267 + // console.log(message)
  268 + },
  269 + fullscreenSwich: function () {
  270 + let isFull = this.isFullscreen()
  271 + this.jessibuca.setFullscreen(!isFull)
  272 + this.fullscreen = !isFull;
284 }, 273 },
  274 + isFullscreen: function () {
  275 + return document.fullscreenElement ||
  276 + document.msFullscreenElement ||
  277 + document.mozFullScreenElement ||
  278 + document.webkitFullscreenElement || false;
  279 + }
  280 + },
  281 + destroyed() {
  282 + if (this.jessibuca) {
  283 + this.jessibuca.destroy();
  284 + }
  285 + this.playing = false;
  286 + this.loaded = false;
  287 + this.performance = "";
  288 + },
285 } 289 }
286 </script> 290 </script>
287 291
288 <style> 292 <style>
289 - .buttons-box{  
290 - width: 100%;  
291 - height: 28px;  
292 - background-color: rgba(43, 51, 63, 0.7);  
293 - position: absolute;  
294 - display: -webkit-box;  
295 - display: -ms-flexbox;  
296 - display: flex;  
297 - left: 0;  
298 - bottom: 0;  
299 - user-select: none;  
300 - z-index: 10;  
301 - }  
302 - .jessibuca-btn{  
303 - width: 20px;  
304 - color: rgb(255, 255, 255);  
305 - line-height: 27px;  
306 - margin: 0px 10px;  
307 - padding: 0px 2px;  
308 - cursor: pointer;  
309 - text-align: center;  
310 - font-size: 0.8rem !important;  
311 - }  
312 - .buttons-box-right {  
313 - position: absolute;  
314 - right: 0;  
315 - } 293 +.buttons-box {
  294 + width: 100%;
  295 + height: 28px;
  296 + background-color: rgba(43, 51, 63, 0.7);
  297 + position: absolute;
  298 + display: -webkit-box;
  299 + display: -ms-flexbox;
  300 + display: flex;
  301 + left: 0;
  302 + bottom: 0;
  303 + user-select: none;
  304 + z-index: 10;
  305 +}
  306 +
  307 +.jessibuca-btn {
  308 + width: 20px;
  309 + color: rgb(255, 255, 255);
  310 + line-height: 27px;
  311 + margin: 0px 10px;
  312 + padding: 0px 2px;
  313 + cursor: pointer;
  314 + text-align: center;
  315 + font-size: 0.8rem !important;
  316 +}
  317 +
  318 +.buttons-box-right {
  319 + position: absolute;
  320 + right: 0;
  321 +}
316 </style> 322 </style>