bytedance · hongqx · Aug 8, 2024 · Jul 30, 2024 · Jul 30, 2024 · Jul 30, 2024
diff --git a/fixtures/xgplayer/index.html b/fixtures/xgplayer/index.html
@@ -56,7 +56,7 @@
   </head>
 
   <body>
-    <div id="video0" style="margin: 0 auto"></div>
+    <div id="video0" style="margin: 0 auto; overflow: visible;"></div>
     <div class="pannel">
       <div class="tool">
         <button type="submit" class="btn" id="js-destroy0" onclick="window.destroy(0)">

diff --git a/fixtures/xgplayer/index.js b/fixtures/xgplayer/index.js
@@ -1,5 +1,7 @@
 import Player, { SimplePlayer, Util } from '../../packages/xgplayer/src/index'
-import { TextTrack } from '../../packages/xgplayer/src/index'
+import Magnifier from '../../packages/xgplayer/src/plugins/magnifier'
+import HlsPlayer from '../../packages/xgplayer-hls/src/index'
+import Poster from '../../packages/xgplayer/src/plugins/poster'
 // import HeatMap from '../../packages/xgplayer/src/plugins/heatmap'
 import { I18N } from '../../packages/xgplayer/src'
 // import DynamicBg from '../../packages/xgplayer/src/plugins/dynamicBg'
@@ -299,9 +301,8 @@ function init(index = 0, config = {}) {
     autoplayMuted: true,
     videoInit: true,
     preloadTime: 20,
-    width: '96%',
     ignores:[],
-    plugins: [],
+    plugins: [HlsPlayer],
     rotate: false,
     heatmap: {
       data: headmapData,
@@ -341,17 +342,38 @@ function init(index = 0, config = {}) {
       // gestureX: false
     },
     // timeSegments: ,
-    // timeSegmentsControls:{
-    //   disable: false,
-    //   segments: [{start: 0, end: 10}]
-    // },
+    timeSegmentsControls:{
+      disable: false,
+      segments: [{start: 35, end: 60}]
+    },
     keyboard: {
       seekStep: 2
     },
     progresspreview: {
       // width: 88.23,
       // height: 50,
-      mode: 'short'
+      mode: 'short',
+      ispots: [{
+        time: 20,
+        duration: 10,
+        text: '1111',
+        id: 1
+      },{
+        time: 40,
+        duration: 165,
+        text: '2222',
+        id: 2
+      },{
+        time: 170,
+        duration: 20,
+        text: '3333',
+        id: 3
+      },{
+        time: 250,
+        duration: 400,
+        text: '4444',
+        id: 3
+      }]
     },
     seekedStatus: 'auto',
     texttrack: {
@@ -385,7 +407,8 @@ function init(index = 0, config = {}) {
       defaultDefinition: '360p',
       isItemClickHide: false
     },
-    height: 300,
+    width: 700,
+    height: 337.5,
     miniprogress: true,
     ...config
   })
@@ -396,11 +419,28 @@ function init(index = 0, config = {}) {
   // setTimeout(() => {
   //   window[p].registerPlugin(Poster)
   // }, 10)
-  window[p].once('canplay',() => {
-    console.log('>>>>>canplay seek', window[p].media.seekable.end(0))
+  window[p].on('seeking',() => {
+    console.log('>>>>>canplay seek', window[p].media.currentTime)
     // window[p].seek(30)
     // window[p].play()
   })
+  window[p].on('timeupdate',() => {
+    console.log('>>>>>timeupdate', window[p].media.currentTime)
+  })
+
+  window[p].on('loadeddata',() => {
+    console.log('>>>>>loadeddata', window[p].media.duration)
+  })
+  window[p].on('durationchange',() => {
+    console.log('>>>>>durationchange', window[p].media.duration)
+  })
+  window[p].on('poster_load',(data) => {
+    console.log('>>>>>poster_load', data)
+  })
+
+  window[p].once('timesegments_change', (data) => {
+    console.log('>>>timesegments_change', data.timeSegments)
+  })
 
   window[p].on('source_error', (data) => {
     console.error('source_error', data)

diff --git a/packages/xgplayer/package.json b/packages/xgplayer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "xgplayer",
-  "version": "3.0.21-rc.2",
+  "version": "3.0.21-alpha.8",
   "description": "video player",
   "main": "dist/index.min.js",
   "module": "es/index.js",
@@ -16,7 +16,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
-    "tag": "rc"
+    "tag": "alpha"
   },
   "files": [
     "dist",

diff --git a/packages/xgplayer/src/index.js b/packages/xgplayer/src/index.js
@@ -31,7 +31,10 @@ export { default as CssFullscreenIcon } from './plugins/cssFullScreen'
 export { default as Danmu } from './plugins/danmu'
 export { DanmuIcon, DanmuPanel } from './plugins/danmu'
 export { default as TextTrack } from './plugins/track'
+export { default as Magnifier } from './plugins/magnifier'
 export { default as HeatMap } from './plugins/heatmap'
+export * from './plugins/progressPreview'
+export { default as TimeSegmentsControls } from './plugins/time/timesegments'
 
 
 /**

diff --git a/packages/xgplayer/src/player.js b/packages/xgplayer/src/player.js
@@ -289,7 +289,7 @@ class Player extends MediaProxy {
      */
     this._offsetInfo = {
       currentTime: -1,
-      duration: 0
+      duration: -1
     }
 
     /**
@@ -2592,15 +2592,15 @@ class Player extends MediaProxy {
   }
 
   get offsetCurrentTime () {
-    return this._offsetInfo.currentTime || 0
+    return this._offsetInfo.currentTime > -1 ? this._offsetInfo.currentTime : this.currentTime
   }
 
   set offsetCurrentTime (val) {
     this._offsetInfo.currentTime = val
   }
 
   get offsetDuration () {
-    return this._offsetInfo.duration || 0
+    return this._offsetInfo.duration > -1 ? this._offsetInfo.duration : this.duration
   }
 
   set offsetDuration (val) {

diff --git a/packages/xgplayer/src/plugins/magnifier/index.js b/packages/xgplayer/src/plugins/magnifier/index.js
@@ -0,0 +1,174 @@
+import Plugin, { Util, Events } from '../../plugin'
+import IntervalTimer from './intervalTimer'
+import './index.scss'
+
+const TAG = 'Magnifier'
+export default class Magnifier extends Plugin {
+  static get pluginName () {
+    return 'magnifier'
+  }
+
+  /**
+   * @type IControlsConfig
+   */
+  static get defaultConfig () {
+    return {
+      disable: true,
+      magnifierWidth: 200,
+      magnifierHeight: 200,
+      magnifierRatio: 2,
+      interval: 100,
+      index: 1
+    }
+  }
+
+  afterCreate () {
+    const { config } = this
+    this.canvas = document.createElement('canvas')
+    this.root.appendChild(this.canvas)
+    Util.addClass(this.canvas, 'magnifier-canvas')
+    this.canvasCtx = this.canvas.getContext('2d')
+    this.canvas.width = config.magnifierWidth || 200
+    this.canvas.height = config.magnifierHeight || 120
+    console.log(TAG, 'afterCreate', this.canvas.width , this.canvas.height, config)
+    this.ratio = config.magnifierRatio || 1
+    this.isOpen = false
+    this.isEnter = false
+    this.contentY = 0
+    this.contentX = 0
+    this.bindEvents()
+    // this.switchMagnifier()
+    // this.startRender()
+  }
+
+  bindEvents () {
+    console.log(TAG, 'bindEvents')
+    const playerRoot = this.player.root
+    playerRoot.addEventListener('mousemove', this.onMouseMove)
+    // playerRoot.addEventListener('mouseenter', this.onEnterPlayer)
+    this.player.on(Events.ENTER_PLAYER, this.onEnterPlayer)
+    this.player.on(Events.LEAVE_PLAYER, this.onLeavePlayer)
+  }
+
+  unbindEvents () {
+    const playerRoot = this.player.root
+    playerRoot.removeEventListener('mousemove', this.onMouseMove)
+  }
+
+  onMouseMove = (e) => {
+    if (this.isOpen) {
+      this.position(e)
+    }
+  }
+
+  onLeavePlayer = (e) => {
+    console.log('>>>onLeavePlayer')
+    this.isEnter = false
+    this.hide()
+  }
+
+  onEnterPlayer = (e) => {
+    console.log('>>>onEnterPlayer')
+    this.isEnter = true
+    this.isOpen && this.show()
+  }
+
+  position (e) {
+    const { player } = this
+    const playerRect = player.root.getBoundingClientRect()
+    const rootRect = playerRect // this.root.getBoundingClientRect()
+    const mWidth = this.canvas.width
+    const mHeight = this.canvas.height
+    const offsetX = e.pageX - playerRect.left
+    const offsetY = e.pageY - playerRect.top
+    const playerWidth = playerRect.width
+    const playerHeight = playerRect.height
+    const canvasLeft = offsetX - mWidth / 2
+    const canvasTop = offsetY - mHeight / 2
+    this.canvas.style.left = `${(offsetX > 0 ? (offsetX < playerWidth ? canvasLeft : playerWidth - mWidth / 2) : -mWidth / 2) + playerRect.left - rootRect.left}px`
+    this.canvas.style.top = `${(offsetY > 0 ? (offsetY < playerHeight ? canvasTop : playerHeight - mHeight / 2) : - mHeight / 2) + playerRect.top - rootRect.top}px`
+
+    this.contentX = offsetX
+    this.contentY = offsetY
+  }
+
+  switchMagnifier () {
+    if (this.isOpen) {
+      this.stopRender()
+      this.hide()
+    } else {
+      this.isEnter && this.show()
+      this.startRender()
+    }
+    this.isOpen = !this.isOpen
+  }
+
+  startRender () {
+    const { magnifierWidth, magnifierHeight, interval } = this.config
+    const { canvas } = this
+    canvas.width = magnifierWidth
+    canvas.height = magnifierHeight
+    if (this.videoTimer) {
+      return
+    }
+    this.videoTimer = new IntervalTimer()
+    this.videoTimer.repeat(() => {
+      this.update()
+    }, interval)
+  }
+
+  stopRender () {
+    if (this.videoTimer) {
+      this.videoTimer.clear()
+      this.videoTimer = null
+    }
+  }
+
+  update () {
+    const { player } = this
+    const { videoWidth, videoHeight } = player.media
+    const mWidth = this.canvas.width
+    const mHeight = this.canvas.height
+    this.canvasCtx.fillRect(0, 0, mWidth, mHeight)
+    const playerRect = player.root.getBoundingClientRect()
+    const left = (this.contentX - mWidth / 2 / this.ratio) * videoWidth / playerRect.width
+    const top = (this.contentY - mHeight / 2 / this.ratio) * videoHeight / playerRect.height
+    const width = mWidth / this.ratio * videoWidth / playerRect.width
+    const height = mHeight / this.ratio * videoHeight / playerRect.height
+    const sx = left > 0 ? left : 0
+    const sy = top > 0 ? top : 0
+    let swidth = left > 0 ? width : width + left
+    let sheight = top > 0 ? height : height + top
+    if (playerRect.width < (this.contentX + mWidth / 4 / this.ratio)) {
+      swidth = width - (this.contentX + mWidth / 4 / this.ratio - playerRect.width) * videoWidth / playerRect.width
+    }
+    if (playerRect.height < (this.contentY + mHeight / 4 / this.ratio)) {
+      sheight = height - (this.contentY + mHeight / 4 / this.ratio - playerRect.height) * videoHeight / playerRect.height
+    }
+    const dx = left > 0 ? 0 : mWidth / 2 - this.contentX * this.ratio
+    const dy = top > 0 ? 0 : mWidth / 2 - this.contentY * this.ratio
+
+    const dwidth = left > 0 ? mWidth : mWidth - (mWidth / 2 - this.contentX * this.ratio)
+    const dheight = top > 0 ? mHeight : mHeight - (mHeight / 2 - this.contentY * this.ratio)
+    this.canvasCtx.drawImage(player.media,
+      sx,
+      sy,
+      swidth,
+      sheight,
+      dx < 0 ? 0 : dx,
+      dy < 0 ? 0 : dy,
+      dwidth > 0 ? dwidth : 0,
+      dheight > 0 ? dheight : 0)
+  }
+
+  destroy () {
+    if (this.videoTimer) {
+      this.videoTimer.clear()
+      this.videoTimer = null
+    }
+    this.unbindEvents()
+  }
+  render () {
+    return '<div class="magnifier-root"></div>'
+  }
+}
diff --git a/packages/xgplayer/src/plugins/magnifier/index.scss b/packages/xgplayer/src/plugins/magnifier/index.scss
@@ -0,0 +1,5 @@
+.magnifier-canvas {
+  position: absolute;
+  z-index: 10;
+  pointer-events: none;
+}
diff --git a/packages/xgplayer/src/plugins/magnifier/intervalTimer.js b/packages/xgplayer/src/plugins/magnifier/intervalTimer.js
@@ -0,0 +1,27 @@
+class IntervalTimer {
+  constructor () {
+    this.timeID = null
+    this.func = null
+  }
+
+  repeat (func, ms) {
+    if (this.func === null) {
+      this.func = func
+    }
+
+    if (this.func !== func) {
+      return
+    }
+
+    this.timeID = setTimeout(() => {
+      func()
+      this.repeat(func, ms)
+    }, ms)
+  }
+
+  clear () {
+    clearTimeout(this.timeID)
+  }
+}
+
+export default IntervalTimer