优化播放效果

web/src/views/cloudRecord/cloudRecordPlayer.vue

@@ -295,6 +295,7 @@ export default {
       } else {
         this.videoUrl = streamInfo['ws_flv']
       }
+      console.log(location.protocol)
       this.streamInfo = streamInfo
       this.timeLen = timeLen
       this.startTime = startTime

web/src/views/common/jessibuca.vue

@@ -5,7 +5,7 @@
     @dblclick="fullscreenSwich"
   >
     <div style="width:100%; padding-top: 56.25%; position: relative;" />
-    <div id="buttonsBox" class="buttons-box" v-if="typeof showButton == 'undefined' || showButton">
+    <div id="buttonsBox" class="buttons-box" >
       <div class="buttons-box-left">
         <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick" />
         <i v-if="playing" class="iconfont icon-pause jessibuca-btn" @click="pause" />
@@ -57,9 +57,12 @@ export default {
   watch: {
     videoUrl: {
       handler(val, _) {
-        this.$nextTick(() => {
+        if (val) {
-          this.play(val)
+          this.$nextTick(() => {
-        })
+            console.log(22222111)
+            this.play(val)
+          })
+        }
       },
       immediate: true
     }
@@ -67,7 +70,7 @@ export default {
   created() {
     const paramUrl = decodeURIComponent(this.$route.params.url)
     this.$nextTick(() => {
-      if (typeof (this.videoUrl) === 'undefined') {
+      if (typeof (this.videoUrl) === 'undefined' || typeof (paramUrl) !== 'undefined') {
         this.videoUrl = paramUrl
       }
       this.btnDom = document.getElementById('buttonsBox')
@@ -89,16 +92,21 @@ export default {
       if (jessibucaPlayer[this._uid]) {
         jessibucaPlayer[this._uid].destroy()
       }
-      this.$refs.container.dataset['jessibuca'] = undefined
+      console.log(1111)
+      console.log(this.$refs.container.dataset['jessibuca'])
+      if (this.$refs.container.dataset['jessibuca']) {
+        this.$refs.container.dataset['jessibuca'] = undefined
+      }
+
       if (this.$refs.container.getAttribute('data-jessibuca')) {
         this.$refs.container.removeAttribute('data-jessibuca')
       }
       const options = {
         container: this.$refs.container,
         videoBuffer: 0,
-        isResize: false,
+        isResize: true,
         useMSE: true,
-        useWCS: true,
+        useWCS: false,
         text: '',
         // background: '',
         controlAutoHide: false,
@@ -193,7 +201,6 @@ export default {
         console.log('Jessibuca -> playToRenderTimes: ', msg)
       })
       jessibuca.on('timeUpdate', (videoPTS) => {
-        console.log(videoPTS)
         if (jessibuca.videoPTS) {
           this.playerTime += (videoPTS - jessibuca.videoPTS)
           this.$emit('playTimeChange', this.playerTime)
@@ -210,18 +217,21 @@ export default {
         this.destroy()
       }
       this.create()
-      jessibucaPlayer[this._uid].on('play', () => {
+      this.$nextTick(() => {
-        this.playing = true
+        jessibucaPlayer[this._uid].on('play', () => {
-        this.loaded = true
+          this.playing = true
-        this.quieting = jessibuca.quieting
+          this.loaded = true
-      })
+          this.quieting = jessibuca.quieting
-      if (jessibucaPlayer[this._uid].hasLoaded()) {
-        jessibucaPlayer[this._uid].play(url)
-      } else {
-        jessibucaPlayer[this._uid].on('load', () => {
-          jessibucaPlayer[this._uid].play(url)
         })
-      }
+        if (jessibucaPlayer[this._uid].hasLoaded()) {
+          jessibucaPlayer[this._uid].play(url)
+        } else {
+          jessibucaPlayer[this._uid].on('load', () => {
+            jessibucaPlayer[this._uid].play(url)
+          })
+        }
+      })
+
     },
     pause: function() {
       if (jessibucaPlayer[this._uid]) {

web/src/views/dialog/devicePlayer.vue

@@ -21,20 +21,19 @@
           @tab-click="changePlayer"
         >
           <el-tab-pane label="Jessibuca" name="jessibuca">
-            <div style="height: 22.5vw">
+            <jessibucaPlayer
-              <jessibucaPlayer
+              style="height: 22.5vw"
-                v-if="activePlayer === 'jessibuca'"
+              v-if="activePlayer === 'jessibuca'"
-                ref="jessibuca"
+              ref="jessibuca"
-                :visible.sync="showVideoDialog"
+              :visible.sync="showVideoDialog"
-                :video-url="videoUrl"
+              :video-url="videoUrl"
-                :error="videoError"
+              :error="videoError"
-                :message="videoError"
+              :message="videoError"
-                :has-audio="hasAudio"
+              :has-audio="hasAudio"
-                fluent
+              fluent
-                autoplay
+              autoplay
-                live
+              live
-              />
+            />
-            </div>
 
           </el-tab-pane>
           <el-tab-pane label="WebRTC" name="webRTC">
@@ -351,7 +350,7 @@ export default {
   data() {
     return {
       video: 'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4',
-      videoUrl: '',
+      videoUrl: null,
       activePlayer: 'jessibuca',
       // 如何你只是用一种播放器，直接注释掉不用的部分即可
       player: {
@@ -427,7 +426,6 @@ export default {
       console.log(this.player[tab.name][0])
       this.activePlayer = tab.name
       this.videoUrl = this.getUrlByStreamInfo()
-      console.log(this.videoUrl)
     },
     openDialog: function(tab, deviceId, channelId, param) {
       if (this.showVideoDialog) {
@@ -439,7 +437,7 @@ export default {
       this.streamId = ''
       this.mediaServerId = ''
       this.app = ''
-      this.videoUrl = ''
+      this.videoUrl = null
       if (this.$refs[this.activePlayer]) {
         this.$refs[this.activePlayer].pause()
       }
@@ -470,7 +468,6 @@ export default {
       this.playFromStreamInfo(false, streamInfo)
     },
     getUrlByStreamInfo() {
-      console.log(this.streamInfo)
       let streamInfo = this.streamInfo
       if (this.streamInfo.transcodeStream) {
         streamInfo = this.streamInfo.transcodeStream