tencent.jquery.pix.component 1.0.66-beta3 → 1.0.67

package/components/video/videoplayer.js

@@ -68,6 +68,9 @@ VideoPlayer.prototype.init = async function() {
         updatingProgress: false,
         controlsDelayStart: 0,
         firstPlay: true,
+        isFullScreen: false,
+        originalParent: null,  // 保存原始父容器引用
+        originalNextSibling: null,  // 保存原始位置的下一个兄弟节点
     }
 
     // 根据showProgressBar选项控制进度条显示
@@ -102,15 +105,27 @@ VideoPlayer.prototype.bindEvent = function() {
         .on('canplay', 'video', () => {
             console.log('canplay');
             this.updateTotalTime();
+        })
+        .on('loadedmetadata', 'video', () => {
+            console.log('loadedmetadata');
+            this.updateTotalTime();
+        })
+        .on('durationchange', 'video', () => {
+            console.log('durationchange');
+            this.updateTotalTime();
+        })
+        .on('ended', 'video', () => {
+            console.log('video ended');
+            this.stop();
         });
 
     // 只有在显示进度条时才绑定进度条相关事件
     if (this.options.showProgressBar) {
         container
-            .on('dragstart', () => { console.log('video container dragstart') }, true)
-            .on('drag', () => { console.log('video container drag') }, true)
-            .on('dragend', () => { console.log('video container dragend') }, true)
-            .on('click', () => { console.log('video container click') }, true)
+            .on('dragstart', () => { console.log('video container dragstart') })
+            .on('drag', () => { console.log('video container drag') })
+            .on('dragend', () => { console.log('video container dragend') })
+            .on('click', () => { console.log('video container click') })
             .on('dragstart', '.myplayer-progress', (e) => {
                 if (e.originalEvent) {
                     this.progressDragStart(e.originalEvent);
@@ -174,6 +189,7 @@ VideoPlayer.prototype.pause = function() {
 }
 
 VideoPlayer.prototype.stop = function() {
+    console.log('stop');
     const video = this.$container.find('video')[0];
     video.pause();
     video.currentTime = 0;
@@ -233,7 +249,7 @@ VideoPlayer.prototype.hideControlsWithDelay = function() {
     this.state.controlsDelayStart = Date.now();
     setTimeout(() => {
         const nowTime = Date.now();
-        console.debug("nowTime - this.state.controlsDelayStart", nowTime - this.state.controlsDelayStart);
+        // console.debug("nowTime - this.state.controlsDelayStart", nowTime - this.state.controlsDelayStart);
 
         // 有时正常时间差也会小于设定的时间，所以判断时减去100ms
         if (this.state.playing === true && nowTime - this.state.controlsDelayStart >= this.options.autoHideControlsDelayMs - 100) {
@@ -252,21 +268,38 @@ VideoPlayer.prototype.startUpdatingProgress = function() {
 
 VideoPlayer.prototype.updateProgress = function() {
     const video = this.$container.find('video')[0];
-    const currentTime = video.currentTime;
-    const duration = video.duration;
-    const progress = currentTime / duration;
-
-    const parentWidth = this.$container.find('.myplayer-progress').width();
-    this.$container.find('.myplayer-subprogress').width(`${progress * parentWidth}px`);
+    if (!video) return;
+    
+    const currentTime = video.currentTime || 0;
+    const duration = video.duration || 0;
+    
+    // 防止duration为NaN或0时计算出错
+    if (duration && !isNaN(duration) && duration > 0) {
+        const progress = currentTime / duration;
+        const parentWidth = this.$container.find('.myplayer-progress').width();
+        this.$container.find('.myplayer-subprogress').width(`${progress * parentWidth}px`);
+        //当progress为1时，将暂停按钮隐藏，播放按钮显示
+        if (progress >= 1) {
+            this.$container.find('.myplayer-btn-pause').hide();
+            this.$container.find('.myplayer-btn-play').show();
+        }
+    }
 
-    this.$container.find('.myplayer-playtime').html(formatTime(currentTime / this.durationFactor));
+    // 格式化当前播放时间（currentTime单位为秒）
+    this.$container.find('.myplayer-playtime').html(formatTime(currentTime));
 }
 
 VideoPlayer.prototype.updateTotalTime = function() {
     const video = this.$container.find('video')[0];
+    if (!video) return;
+    
     const duration = video.duration;
-
-    this.$container.find('.myplayer-totaltime').html(formatTime(duration / this.durationFactor));
+    
+    // 只有当duration有效时才更新显示
+    if (duration && !isNaN(duration) && isFinite(duration) && duration > 0) {
+        // duration单位为秒
+        this.$container.find('.myplayer-totaltime').html(formatTime(duration));
+    }
 }
 
 VideoPlayer.prototype.toggleFullScreen = function() {
@@ -277,16 +310,22 @@ VideoPlayer.prototype.toggleFullScreen = function() {
     const innerContainer = $container.find('.myplayer-container');
 
     if (innerContainer.hasClass('myplayer-full-screen')) {
+        // 退出全屏：将容器移回原位置
+        this._moveBackToOriginal();
         innerContainer.removeClass('myplayer-full-screen');
         bottom.removeClass('myplayer-full-screen');
         fullScreenBtn.show();
         exitFullScreenBtn.hide();
+        this.state.isFullScreen = false;
         this.options.stateChanged.call(this, 'exitFullScreen');
     } else {
+        // 进入全屏：将容器移动到body
+        this._moveToBody();
         innerContainer.addClass('myplayer-full-screen');
         bottom.addClass('myplayer-full-screen');
         fullScreenBtn.hide();
         exitFullScreenBtn.show();
+        this.state.isFullScreen = true;
         this.options.stateChanged.call(this, 'enterFullScreen');
     }
 
@@ -301,22 +340,83 @@ VideoPlayer.prototype.setFullScreen = function (target = true) {
     const innerContainer = $container.find('.myplayer-container');
 
     if (!target && innerContainer.hasClass('myplayer-full-screen')) {
+        // 退出全屏：将容器移回原位置
+        this._moveBackToOriginal();
         innerContainer.removeClass('myplayer-full-screen');
         bottom.removeClass('myplayer-full-screen');
         fullScreenBtn.show();
         exitFullScreenBtn.hide();
+        this.state.isFullScreen = false;
         this.options.stateChanged.call(this, 'exitFullScreen');
     } else if (target && !innerContainer.hasClass('myplayer-full-screen')) {
+        // 进入全屏：将容器移动到body
+        this._moveToBody();
         innerContainer.addClass('myplayer-full-screen');
         bottom.addClass('myplayer-full-screen');
         fullScreenBtn.hide();
         exitFullScreenBtn.show();
+        this.state.isFullScreen = true;
         this.options.stateChanged.call(this, 'enterFullScreen');
     }
 
     this.hideControlsWithDelay();
 }
 
+/**
+ * 将容器移动到body（进入全屏时调用）
+ * @private
+ */
+VideoPlayer.prototype._moveToBody = function() {
+    const containerEl = this.$container[0];
+    
+    // 保存原始位置信息（仅在第一次移动时保存）
+    if (!this.state.originalParent) {
+        this.state.originalParent = containerEl.parentNode;
+        this.state.originalNextSibling = containerEl.nextSibling;
+    }
+    
+    // 从原容器解绑
+    this.$container.off();
+    // 从body解绑所有相关事件
+    $(document.body).off('click.myplayer');
+    $(document.body).off('canplay.myplayer');
+    $(document.body).off('dragstart.myplayer');
+    $(document.body).off('drag.myplayer');
+    $(document.body).off('dragend.myplayer');
+    
+    // 移动到body
+    document.body.appendChild(containerEl);
+    
+    // 重新绑定事件
+    this.bindEvent();
+}
+
+/**
+ * 将容器移回原位置（退出全屏时调用）
+ * @private
+ */
+VideoPlayer.prototype._moveBackToOriginal = function() {
+    const containerEl = this.$container[0];
+    
+    // 如果没有保存原始位置，说明还没移动过，直接返回
+    if (!this.state.originalParent) {
+        return;
+    }
+    
+    // 解绑事件
+    this.$container.off();
+    
+    // 移回原位置
+    if (this.state.originalNextSibling) {
+        this.state.originalParent.insertBefore(containerEl, this.state.originalNextSibling);
+    } else {
+        this.state.originalParent.appendChild(containerEl);
+    }
+    
+    // 重新绑定事件
+    this.bindEvent();
+}
+
 /**
  * 进度条拖动开始
  * @param {MouseEvent} e 
@@ -347,10 +447,14 @@ VideoPlayer.prototype.progressDrag = function(e) {
     const video = $container.find('video')[0];
 
     const parentWidth = progress.width();
-    const curOffset = Math.max(Math.min(e.offsetX, parentWidth), 0);
+    // 使用getBoundingClientRect计算准确的点击位置
+    const rect = progress[0].getBoundingClientRect();
+    const clientX = e.clientX !== undefined ? e.clientX : (e.touches ? e.touches[0].clientX : 0);
+    const curOffset = Math.max(Math.min(clientX - rect.left, parentWidth), 0);
+    
     subprogress.width(`${curOffset}px`);
     const adjustedPlayTime = curOffset / parentWidth * video.duration;
-    $container.find('.myplayer-playtime').html(formatTime(adjustedPlayTime / this.durationFactor));
+    $container.find('.myplayer-playtime').html(formatTime(adjustedPlayTime));
 }
 
 /**
@@ -366,10 +470,19 @@ VideoPlayer.prototype.progressDragEnd = function(e) {
     const video = $container.find('video')[0];
     const progress = $container.find('.myplayer-progress');
     const parentWidth = progress.width();
-    const curOffset = Math.max(Math.min(e.offsetX, parentWidth), 0);
-
-    // currentTime set 单位s, get 单位ms
-    video.currentTime = curOffset / progress.width() * video.duration / this.durationFactor;
+    
+    // 使用getBoundingClientRect计算准确的点击位置
+    const rect = progress[0].getBoundingClientRect();
+    const clientX = e.clientX !== undefined ? e.clientX : (e.touches ? e.touches[0].clientX : 0);
+    const curOffset = Math.max(Math.min(clientX - rect.left, parentWidth), 0);
+    
+    // 计算目标播放时间（单位：秒）
+    const targetTime = (curOffset / parentWidth) * video.duration;
+    
+    // 确保duration有效再设置currentTime
+    if (video.duration && !isNaN(video.duration) && video.duration > 0) {
+        video.currentTime = targetTime;
+    }
 
     this.play();
     

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tencent.jquery.pix.component",
-  "version": "1.0.66-beta3",
+  "version": "1.0.67",
   "description": "",
   "main": "index.js",
   "files": [