完善录像回放播放器切换

2025-09-23 18:04:30 +08:00
parent e7d26b34b3
commit 0ed37d58ec
6 changed files with 144 additions and 108 deletions
--- a/web/src/views/common/h265web.vue
+++ b/web/src/views/common/h265web.vue
@@ -144,7 +144,7 @@ export default {
          extInfo: {
            coreProbePart: 0.4,
            probeSize: 8192,
-            ignoreAudio: this.hasAudio == null ? 0 : (this.hasAudio ? 0 : 1)
+            ignoreAudio: this.hasAudio === null ? 0 : (this.hasAudio ? 0 : 1)
          }
        },
        options
@@ -169,10 +169,7 @@ export default {
        this.mediaInfo = h265web.mediaInfo()
      }
      h265web.onPlayTime = (videoPTS) => {
-        if (h265web.videoPTS) {
-          this.$emit('playTimeChange', videoPTS - h265web.videoPTS)
-        }
-        h265web.videoPTS = videoPTS
+        this.$emit('playTimeChange', videoPTS * 1000)
      }
      h265web.do()
    },
@@ -194,6 +191,9 @@ export default {
    playBtnClick: function(event) {
      this.play(this.videoUrl)
    },
+    refresh: function() {
+      this.play(this.videoUrl)
+    },
    play: function(url) {
      if (h265webPlayer[this._uid]) {
        this.destroy()
@@ -261,7 +261,6 @@ export default {
    },
    setPlaybackRate: function(speed) {
      h265webPlayer[this._uid].setPlaybackRate(speed)
-
    }
  }
 }
--- a/web/src/views/common/jessibuca.vue
+++ b/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 showBtn == 'undefined' || showBtn">
+    <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" />
@@ -34,11 +34,11 @@
 const jessibucaPlayer = {}
 export default {
  name: 'Jessibuca',
-  props: ['videoUrl', 'error', 'hasAudio', 'height', 'showBtn'],
+  props: ['videoUrl', 'error', 'hasAudio', 'height', 'showButton'],
  data() {
    return {
      playing: false,
-      isNotMute: false,
+      isNotMute: true,
      quieting: false,
      fullscreen: false,
      loaded: false, // mute
@@ -48,6 +48,7 @@ export default {
      btnDom: null,
      videoInfo: null,
      volume: 1,
+      playerTime: 0,
      rotate: 0,
      vod: true, // 点播
      forceNoOffscreen: false
@@ -66,81 +67,57 @@ export default {
  created() {
    const paramUrl = decodeURIComponent(this.$route.params.url)
    this.$nextTick(() => {
-      this.updatePlayerDomSize()
-      window.onresize = this.updatePlayerDomSize
      if (typeof (this.videoUrl) === 'undefined') {
        this.videoUrl = paramUrl
      }
      this.btnDom = document.getElementById('buttonsBox')
    })
  },
-  // mounted() {
-  //   const ro = new ResizeObserver(entries => {
-  //     entries.forEach(entry => {
-  //       this.updatePlayerDomSize()
-  //     });
-  //   });
-  //   ro.observe(this.$refs.container);
-  // },
-  mounted() {
-    this.updatePlayerDomSize()
-  },
+  mounted() {},
  destroyed() {
    if (jessibucaPlayer[this._uid]) {
+      jessibucaPlayer[this._uid].videoPTS = 0
      jessibucaPlayer[this._uid].destroy()
    }
    this.playing = false
    this.loaded = false
    this.performance = ''
+    this.playerTime = 0
  },
  methods: {
-    updatePlayerDomSize() {
-      const dom = this.$refs.container
-      if (!this.parentNodeResizeObserver) {
-        this.parentNodeResizeObserver = new ResizeObserver(entries => {
-          this.updatePlayerDomSize()
-        })
-        this.parentNodeResizeObserver.observe(dom.parentNode)
-      }
-      const boxWidth = dom.parentNode.clientWidth
-      const boxHeight = dom.parentNode.clientHeight
-      let width = boxWidth
-      let height = (9 / 16) * width
-      if (boxHeight > 0 && boxWidth > boxHeight / 9 * 16) {
-        height = boxHeight
-        width = boxHeight / 9 * 16
-      }
-
-      const clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight)
-      if (height > clientHeight) {
-        height = clientHeight
-        width = (16 / 9) * height
-      }
-      this.playerWidth = width
-      this.playerHeight = height
-      if (this.playing) {
-        jessibucaPlayer[this._uid].resize(this.playerWidth, this.playerHeight)
-      }
-    },
    create() {
+      if (jessibucaPlayer[this._uid]) {
+        jessibucaPlayer[this._uid].destroy()
+      }
+      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,
-        autoWasm: true,
-        background: '',
+        videoBuffer: 0,
+        isResize: false,
+        useMSE: true,
+        useWCS: true,
+        text: '',
+        // background: '',
        controlAutoHide: false,
        debug: false,
-        decoder: 'static/js/jessibuca/decoder.js',
-        forceNoOffscreen: false,
+        hotKey: true,
+        decoder: '/static/js/jessibuca/decoder.js',
+        sNotMute: true,
+        timeout: 10,
+        recordType: 'mp4',
+        isFlv: false,
+        forceNoOffscreen: true,
        hasAudio: typeof (this.hasAudio) === 'undefined' ? true : this.hasAudio,
        heartTimeout: 5,
        heartTimeoutReplay: true,
        heartTimeoutReplayTimes: 3,
        hiddenAutoPause: false,
-        hotKey: true,
-        isFlv: false,
        isFullResize: false,
+
        isNotMute: this.isNotMute,
-        isResize: true,
        keepScreenOn: true,
        loadingText: '请稍等, 视频加载中......',
        loadingTimeout: 10,
@@ -152,38 +129,37 @@ export default {
          screenshot: false,
          play: false,
          audio: false,
-          record: false
+          recorder: false
        },
-        recordType: 'mp4',
-        rotate: 0,
+        // rotate: 0,
        showBandwidth: false,
        supportDblclickFullscreen: false,
-        timeout: 10,
-        useMSE: true,
-        useWCS: false,
-        useWebFullScreen: true,
-        videoBuffer: 0.1,
+
+        useWebFullSreen: true,
+
        wasmDecodeErrorReplay: true,
-        wcsUseVideoRender: true
+        wcsUseVideoRendcer: true
      }
      console.log('Jessibuca -> options: ', options)
-      jessibucaPlayer[this._uid] = new window.Jessibuca({ ...options })
+      jessibucaPlayer[this._uid] = new window.Jessibuca(options)

      const jessibuca = jessibucaPlayer[this._uid]
      const _this = this
-      jessibuca.on('pause', function() {
+      jessibuca.on('pause', () => {
        _this.playing = false
+        this.$emit('playStatusChange', false)
      })
-      jessibuca.on('play', function() {
+      jessibuca.on('play', () => {
        _this.playing = true
+        this.$emit('playStatusChange', true)
      })
-      jessibuca.on('fullscreen', function(msg) {
+      jessibuca.on('fullscreen', (msg) => {
        _this.fullscreen = msg
      })
-      jessibuca.on('mute', function(msg) {
+      jessibuca.on('mute', (msg) => {
        _this.isNotMute = !msg
      })
-      jessibuca.on('performance', function(performance) {
+      jessibuca.on('performance', (performance) => {
        let show = '卡顿'
        if (performance === 2) {
          show = '非常流畅'
@@ -192,30 +168,38 @@ export default {
        }
        _this.performance = show
      })
-      jessibuca.on('kBps', function(kBps) {
+      jessibuca.on('kBps', (kBps) => {
        _this.kBps = Math.round(kBps)
      })
-      jessibuca.on('videoInfo', function(msg) {
+      jessibuca.on('videoInfo', (msg) => {
        console.log('Jessibuca -> videoInfo: ', msg)
      })
-      jessibuca.on('audioInfo', function(msg) {
+      jessibuca.on('audioInfo', (msg) => {
        console.log('Jessibuca -> audioInfo: ', msg)
      })
-      jessibuca.on('error', function(msg) {
+      jessibuca.on('error', (msg) => {
        console.log('Jessibuca -> error: ', msg)
      })
-      jessibuca.on('timeout', function(msg) {
+      jessibuca.on('timeout', (msg) => {
        console.log('Jessibuca -> timeout: ', msg)
      })
-      jessibuca.on('loadingTimeout', function(msg) {
+      jessibuca.on('loadingTimeout', (msg) => {
        console.log('Jessibuca -> timeout: ', msg)
      })
-      jessibuca.on('delayTimeout', function(msg) {
+      jessibuca.on('delayTimeout', (msg) => {
        console.log('Jessibuca -> timeout: ', msg)
      })
-      jessibuca.on('playToRenderTimes', function(msg) {
+      jessibuca.on('playToRenderTimes', (msg) => {
        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
+      })
    },
    playBtnClick: function(event) {
      this.play(this.videoUrl)
@@ -266,9 +250,9 @@ export default {
      if (jessibucaPlayer[this._uid]) {
        jessibucaPlayer[this._uid].destroy()
      }
-      if (document.getElementById('buttonsBox') === null && (typeof this.showBtn === 'undefined' || this.showBtn)) {
-        this.$refs.container.appendChild(this.btnDom)
-      }
+      // if (document.getElementById('buttonsBox') === null && (typeof this.showButton === 'undefined' || this.showButton)) {
+      //   this.$refs.container.appendChild(this.btnDom)
+      // }
      jessibucaPlayer[this._uid] = null
      this.playing = false
      this.err = ''
@@ -284,6 +268,9 @@ export default {
        document.msFullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement || false
+    },
+    setPlaybackRate: function() {
+
    }
  }
 }