优化播放效果

web/src/views/common/jessibuca.vue

@@ -55,17 +55,19 @@ export default {
     }
   },
   watch: {
-    videoUrl: {
-      handler(val, _) {
-        if (val) {
-          this.$nextTick(() => {
-            console.log(22222111)
-            this.play(val)
-          })
-        }
-      },
-      immediate: true
-    }
+    // videoUrl: {
+    //   handler(val, _) {
+    //     if (typeof val !== 'undefined' && val !== 'undefined') {
+    //       console.log(22222111)
+    //       console.log(val)
+    //       this.$nextTick(() => {
+    //
+    //         this.play(val)
+    //       })
+    //     }
+    //   },
+    //   immediate: true
+    // }
   },
   created() {
     const paramUrl = decodeURIComponent(this.$route.params.url)
@@ -152,20 +154,19 @@ export default {
       jessibucaPlayer[this._uid] = new window.Jessibuca(options)
 
       const jessibuca = jessibucaPlayer[this._uid]
-      const _this = this
       jessibuca.on('pause', () => {
-        _this.playing = false
+        this.playing = false
         this.$emit('playStatusChange', false)
       })
       jessibuca.on('play', () => {
-        _this.playing = true
+        this.playing = true
         this.$emit('playStatusChange', true)
       })
       jessibuca.on('fullscreen', (msg) => {
-        _this.fullscreen = msg
+        this.fullscreen = msg
       })
       jessibuca.on('mute', (msg) => {
-        _this.isNotMute = !msg
+        this.isNotMute = !msg
       })
       jessibuca.on('performance', (performance) => {
         let show = '卡顿'
@@ -174,10 +175,10 @@ export default {
         } else if (performance === 1) {
           show = '流畅'
         }
-        _this.performance = show
+        this.performance = show
       })
       jessibuca.on('kBps', (kBps) => {
-        _this.kBps = Math.round(kBps)
+        this.kBps = Math.round(kBps)
       })
       jessibuca.on('videoInfo', (msg) => {
         console.log('Jessibuca -> videoInfo: ', msg)
@@ -207,6 +208,11 @@ export default {
         }
         jessibuca.videoPTS = videoPTS
       })
+      jessibuca.on('play', () => {
+        this.playing = true
+        this.loaded = true
+        this.quieting = jessibuca.quieting
+      })
     },
     playBtnClick: function(event) {
       this.play(this.videoUrl)
@@ -218,16 +224,13 @@ export default {
       }
       this.create()
       this.$nextTick(() => {
-        jessibucaPlayer[this._uid].on('play', () => {
-          this.playing = true
-          this.loaded = true
-          this.quieting = jessibuca.quieting
-        })
+        jessibucaPlayer[this._uid].play(url)
+
         if (jessibucaPlayer[this._uid].hasLoaded()) {
-          jessibucaPlayer[this._uid].play(url)
+          // jessibucaPlayer[this._uid].play(url)
         } else {
           jessibucaPlayer[this._uid].on('load', () => {
-            jessibucaPlayer[this._uid].play(url)
+            // jessibucaPlayer[this._uid].play(url)
           })
         }
       })

web/src/views/dialog/devicePlayer.vue

@@ -26,7 +26,6 @@
               v-if="activePlayer === 'jessibuca'"
               ref="jessibuca"
               :visible.sync="showVideoDialog"
-              :video-url="videoUrl"
               :error="videoError"
               :message="videoError"
               :has-audio="hasAudio"
@@ -350,7 +349,7 @@ export default {
   data() {
     return {
       video: 'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4',
-      videoUrl: null,
+      videoUrl: '',
       activePlayer: 'jessibuca',
       // 如何你只是用一种播放器，直接注释掉不用的部分即可
       player: {
@@ -437,7 +436,7 @@ export default {
       this.streamId = ''
       this.mediaServerId = ''
       this.app = ''
-      this.videoUrl = null
+      this.videoUrl = ''
       if (this.$refs[this.activePlayer]) {
         this.$refs[this.activePlayer].pause()
       }
@@ -472,17 +471,19 @@ export default {
       if (this.streamInfo.transcodeStream) {
         streamInfo = this.streamInfo.transcodeStream
       }
+      let videoUrl
       if (location.protocol === 'https:') {
-        this.videoUrl = streamInfo[this.player[this.activePlayer][1]]
+        videoUrl = streamInfo[this.player[this.activePlayer][1]]
       } else {
-        this.videoUrl = streamInfo[this.player[this.activePlayer][0]]
+        videoUrl = streamInfo[this.player[this.activePlayer][0]]
       }
-      return this.videoUrl
+      return videoUrl
     },
 
     playFromStreamInfo: function(realHasAudio, streamInfo) {
       this.showVideoDialog = true
       this.hasaudio = realHasAudio && this.hasaudio
+      console.log(66666666)
       if (this.$refs[this.activePlayer]) {
         this.$refs[this.activePlayer].play(this.getUrlByStreamInfo(streamInfo))
       } else {