Pre Merge pull request !36 from 阿斌/N/A

web/src/views/cloudRecord/cloudRecordPlayer.vue

@@ -295,7 +295,6 @@ 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" >
+    <div id="buttonsBox" class="buttons-box" v-if="typeof showButton == 'undefined' || showButton">
       <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" />
@@ -55,24 +55,19 @@ export default {
     }
   },
   watch: {
-    // videoUrl: {
-    //   handler(val, _) {
-    //     if (typeof val !== 'undefined' && val !== 'undefined') {
-    //       console.log(22222111)
-    //       console.log(val)
-    //       this.$nextTick(() => {
-    //
-    //         this.play(val)
-    //       })
-    //     }
-    //   },
-    //   immediate: true
-    // }
+    videoUrl: {
+      handler(val, _) {
+        this.$nextTick(() => {
+          this.play(val)
+        })
+      },
+      immediate: true
+    }
   },
   created() {
     const paramUrl = decodeURIComponent(this.$route.params.url)
     this.$nextTick(() => {
-      if (typeof (this.videoUrl) === 'undefined' || typeof (paramUrl) !== 'undefined') {
+      if (typeof (this.videoUrl) === 'undefined') {
         this.videoUrl = paramUrl
       }
       this.btnDom = document.getElementById('buttonsBox')
@@ -94,21 +89,16 @@ export default {
       if (jessibucaPlayer[this._uid]) {
         jessibucaPlayer[this._uid].destroy()
       }
-      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: true,
+        isResize: false,
         useMSE: true,
-        useWCS: false,
+        useWCS: true,
         text: '',
         // background: '',
         controlAutoHide: false,
@@ -154,19 +144,20 @@ 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 = '卡顿'
@@ -175,10 +166,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)
@@ -202,17 +193,13 @@ 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)
         }
         jessibuca.videoPTS = videoPTS
       })
-      jessibuca.on('play', () => {
-        this.playing = true
-        this.loaded = true
-        this.quieting = jessibuca.quieting
-      })
     },
     playBtnClick: function(event) {
       this.play(this.videoUrl)
@@ -223,18 +210,18 @@ export default {
         this.destroy()
       }
       this.create()
-      this.$nextTick(() => {
-        jessibucaPlayer[this._uid].play(url)
-
+      jessibucaPlayer[this._uid].on('play', () => {
+        this.playing = true
+        this.loaded = true
+        this.quieting = jessibuca.quieting
+      })
       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)
         })
       }
-      })
-
     },
     pause: function() {
       if (jessibucaPlayer[this._uid]) {

web/src/views/dialog/devicePlayer.vue

@@ -21,11 +21,12 @@
           @tab-click="changePlayer"
         >
           <el-tab-pane label="Jessibuca" name="jessibuca">
+            <div style="height: 22.5vw">
               <jessibucaPlayer
-              style="height: 22.5vw"
                 v-if="activePlayer === 'jessibuca'"
                 ref="jessibuca"
                 :visible.sync="showVideoDialog"
+                :video-url="videoUrl"
                 :error="videoError"
                 :message="videoError"
                 :has-audio="hasAudio"
@@ -33,6 +34,7 @@
                 autoplay
                 live
               />
+            </div>
 
           </el-tab-pane>
           <el-tab-pane label="WebRTC" name="webRTC">
@@ -425,6 +427,7 @@ 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) {
@@ -467,23 +470,22 @@ export default {
       this.playFromStreamInfo(false, streamInfo)
     },
     getUrlByStreamInfo() {
+      console.log(this.streamInfo)
       let streamInfo = this.streamInfo
       if (this.streamInfo.transcodeStream) {
         streamInfo = this.streamInfo.transcodeStream
       }
-      let videoUrl
       if (location.protocol === 'https:') {
-        videoUrl = streamInfo[this.player[this.activePlayer][1]]
+        this.videoUrl = streamInfo[this.player[this.activePlayer][1]]
       } else {
-        videoUrl = streamInfo[this.player[this.activePlayer][0]]
+        this.videoUrl = streamInfo[this.player[this.activePlayer][0]]
       }
-      return videoUrl
+      return this.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 {