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 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 3 <div class="buttons-box" id="buttonsBox">
4 4 <div class="buttons-box-left">
5 5 <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i>
... ... @@ -9,10 +9,11 @@
9 9 <i v-if="!isNotMute" class="iconfont icon-audio-mute jessibuca-btn" @click="jessibuca.cancelMute()"></i>
10 10 </div>
11 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 13 <!-- <i class="iconfont icon-file-record1 jessibuca-btn"></i>-->
14 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 17 <i class="iconfont icon-shuaxin11 jessibuca-btn" @click="playBtnClick"></i>
17 18 <i v-if="!fullscreen" class="iconfont icon-weibiaoti10 jessibuca-btn" @click="fullscreenSwich"></i>
18 19 <i v-if="fullscreen" class="iconfont icon-weibiaoti11 jessibuca-btn" @click="fullscreenSwich"></i>
... ... @@ -23,294 +24,299 @@
23 24  
24 25 <script>
25 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 252 if (this.jessibuca) {
279 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 259 this.playing = false;
282   - this.loaded = false;
  260 + this.err = "";
283 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 290 </script>
287 291  
288 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 322 </style>
... ...