tencent.jquery.pix.component 1.0.69 → 1.0.71

package/components/banner/banner.scss

@@ -2,6 +2,9 @@
   display: flex;
   flex-direction: row;
   height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
 }
 
 .banner-pagination-item {
@@ -43,4 +46,4 @@
   text-wrap: nowrap;
   overflow: hidden;
   color: white;
-}
+}

package/components/video/videoplayer.js

@@ -15,6 +15,7 @@ import './videocss.scss'
  * @param {string} options.vid 腾讯视频id
  * @param {string} [options.videoUrl] 视频地址，非腾讯视频时使用，比如上传到cos的视频
  * @param {string} [options.previewUrl] 视频预览图
+ * @param {string} [options.timeUnit] 视频的时间单位  默认是s秒 ，如果是ms，则传1000
  * @param {0|1} [options.videoType=1] 视频类型选项，0: 标清，1: 高清
  * @param {number} [options.autoHideControlsDelayMs=5000] 自动隐藏控制条延迟时间，单位ms
  * @param {boolean} [options.showProgressBar=true] 是否显示进度条
@@ -24,18 +25,25 @@ import './videocss.scss'
 export function VideoPlayer(options) {
     this.options = options
     if (typeof this.options.stateChanged !== 'function') {
-        this.options.stateChanged = () => {};
+        this.options.stateChanged = () => { };
     }
     this.init()
 }
 
-VideoPlayer.prototype.init = async function() {
-    if (windowEnv === 'h5') {
-        this.durationFactor = 1; // 浏览器，单位s
+VideoPlayer.prototype.init = async function () {
+    if ('timeUnit' in this.options) {
+        // 浏览器，单位s ; PixUI，单位ms
+        this.timeUnit = Number(this.options.timeUnit) || 1;
     } else {
-        this.durationFactor = 1000; // PixUI，单位ms
+        if (windowEnv === 'pix') {
+            this.timeUnit = 1000;
+        } else {
+            this.timeUnit = 1;
+        }
     }
 
+
+
     const $container = $(this.options.container);
     this.$container = $container;
     $container.html(VideoHTML);
@@ -81,7 +89,7 @@ VideoPlayer.prototype.init = async function() {
     this.bindEvent();
 }
 
-VideoPlayer.prototype.bindEvent = function() {
+VideoPlayer.prototype.bindEvent = function () {
     const container = this.$container;
     container.off()
         .on('click', '.myplayer-video-cover', () => {
@@ -157,7 +165,7 @@ VideoPlayer.prototype.bindEvent = function() {
     }
 }
 
-VideoPlayer.prototype.play = function() {
+VideoPlayer.prototype.play = function () {
     if (this.state.firstPlay) {
         this.state.firstPlay = false;
         this.$container.find('.myplayer-video-cover,.myplayer-video-preview').hide();
@@ -175,7 +183,7 @@ VideoPlayer.prototype.play = function() {
     this.options.stateChanged.call(this, 'play');
 }
 
-VideoPlayer.prototype.pause = function() {
+VideoPlayer.prototype.pause = function () {
     this.showControls();
     const video = this.$container.find('video')[0];
     video.pause();
@@ -188,8 +196,8 @@ VideoPlayer.prototype.pause = function() {
     this.options.stateChanged.call(this, 'pause');
 }
 
-VideoPlayer.prototype.stop = function() {
-    console.log('stop');
+VideoPlayer.prototype.stop = function () {
+
     const video = this.$container.find('video')[0];
     video.pause();
     video.currentTime = 0;
@@ -204,8 +212,8 @@ VideoPlayer.prototype.stop = function() {
     this.options.stateChanged.call(this, 'stop');
 }
 
-VideoPlayer.prototype.maskClicked = function() {
-    console.log('maskClicked')
+VideoPlayer.prototype.maskClicked = function () {
+
     if (this.state.controlsVisible === true) {
         if (this.state.playing === true) {
             this.pause();
@@ -223,7 +231,7 @@ VideoPlayer.prototype.maskClicked = function() {
     }
 }
 
-VideoPlayer.prototype.showControls = function() {
+VideoPlayer.prototype.showControls = function () {
     const container = this.$container;
     container.find('.myplayer-video-mask').removeClass('myplayer-transparent');
     container.find('.myplayer-top').removeClass('myplayer-transparent');
@@ -236,7 +244,7 @@ VideoPlayer.prototype.showControls = function() {
     this.hideControlsWithDelay();
 }
 
-VideoPlayer.prototype.hideControls = function() {
+VideoPlayer.prototype.hideControls = function () {
     const container = this.$container;
     container.find('.myplayer-video-mask').addClass('myplayer-transparent');
     container.find('.myplayer-top').addClass('myplayer-transparent');
@@ -245,7 +253,7 @@ VideoPlayer.prototype.hideControls = function() {
     this.state.updatingProgress = false;
 }
 
-VideoPlayer.prototype.hideControlsWithDelay = function() {
+VideoPlayer.prototype.hideControlsWithDelay = function () {
     this.state.controlsDelayStart = Date.now();
     setTimeout(() => {
         const nowTime = Date.now();
@@ -258,7 +266,7 @@ VideoPlayer.prototype.hideControlsWithDelay = function() {
     }, this.options.autoHideControlsDelayMs);
 }
 
-VideoPlayer.prototype.startUpdatingProgress = function() {
+VideoPlayer.prototype.startUpdatingProgress = function () {
     this.updateProgress();
 
     if (this.state.updatingProgress) {
@@ -266,13 +274,13 @@ VideoPlayer.prototype.startUpdatingProgress = function() {
     }
 }
 
-VideoPlayer.prototype.updateProgress = function() {
+VideoPlayer.prototype.updateProgress = function () {
     const video = this.$container.find('video')[0];
     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;
@@ -286,23 +294,22 @@ VideoPlayer.prototype.updateProgress = function() {
     }
 
     // 格式化当前播放时间（currentTime单位为秒）
-    this.$container.find('.myplayer-playtime').html(formatTime(currentTime));
+    this.$container.find('.myplayer-playtime').html(this.formatTime(currentTime));
 }
 
-VideoPlayer.prototype.updateTotalTime = function() {
+VideoPlayer.prototype.updateTotalTime = function () {
     const video = this.$container.find('video')[0];
     if (!video) return;
-    
     const duration = video.duration;
-    
+
     // 只有当duration有效时才更新显示
     if (duration && !isNaN(duration) && isFinite(duration) && duration > 0) {
         // duration单位为秒
-        this.$container.find('.myplayer-totaltime').html(formatTime(duration));
+        this.$container.find('.myplayer-totaltime').html(this.formatTime(duration));
     }
 }
 
-VideoPlayer.prototype.toggleFullScreen = function() {
+VideoPlayer.prototype.toggleFullScreen = function () {
     const $container = this.$container;
     const fullScreenBtn = $container.find('.myplayer-btn-full-screen');
     const exitFullScreenBtn = $container.find('.myplayer-btn-exit-full-screen');
@@ -366,15 +373,15 @@ VideoPlayer.prototype.setFullScreen = function (target = true) {
  * 将容器移动到body（进入全屏时调用）
  * @private
  */
-VideoPlayer.prototype._moveToBody = function() {
+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解绑所有相关事件
@@ -383,10 +390,10 @@ VideoPlayer.prototype._moveToBody = function() {
     $(document.body).off('dragstart.myplayer');
     $(document.body).off('drag.myplayer');
     $(document.body).off('dragend.myplayer');
-    
+
     // 移动到body
     document.body.appendChild(containerEl);
-    
+
     // 重新绑定事件
     this.bindEvent();
 }
@@ -395,24 +402,24 @@ VideoPlayer.prototype._moveToBody = function() {
  * 将容器移回原位置（退出全屏时调用）
  * @private
  */
-VideoPlayer.prototype._moveBackToOriginal = function() {
+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();
 }
@@ -421,11 +428,11 @@ VideoPlayer.prototype._moveBackToOriginal = function() {
  * 进度条拖动开始
  * @param {MouseEvent} e 
  */
-VideoPlayer.prototype.progressDragStart = function(e) {
+VideoPlayer.prototype.progressDragStart = function (e) {
     if (!this.options.showProgressBar) {
         return;
     }
-    
+
     this.state.updatingProgress = false;
     if (this.state.playing === true) {
         this.pause();
@@ -436,11 +443,11 @@ VideoPlayer.prototype.progressDragStart = function(e) {
  * 进度条拖动
  * @param {MouseEvent} e 
  */
-VideoPlayer.prototype.progressDrag = function(e) {
+VideoPlayer.prototype.progressDrag = function (e) {
     if (!this.options.showProgressBar) {
         return;
     }
-    
+
     const $container = this.$container;
     const progress = $container.find('.myplayer-progress');
     const subprogress = $container.find('.myplayer-subprogress');
@@ -451,63 +458,86 @@ VideoPlayer.prototype.progressDrag = function(e) {
     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));
+    $container.find('.myplayer-playtime').html(this.formatTime(adjustedPlayTime));
 }
 
 /**
  * 进度条拖动结束
  * @param {MouseEvent} e 
  */
-VideoPlayer.prototype.progressDragEnd = function(e) {
+VideoPlayer.prototype.progressDragEnd = function (e) {
     if (!this.options.showProgressBar) {
         return;
     }
-    
+
     const $container = this.$container;
     const video = $container.find('video')[0];
     const progress = $container.find('.myplayer-progress');
     const parentWidth = progress.width();
-    
+
     // 使用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 duration = video.duration;//this.getCurrentDuration();
     // 计算目标播放时间（单位：秒）
-    const targetTime = (curOffset / parentWidth) * video.duration;
-    
+    const targetTime = (curOffset / parentWidth) * duration;
+
     // 确保duration有效再设置currentTime
-    if (video.duration && !isNaN(video.duration) && video.duration > 0) {
-        video.currentTime = targetTime;
+    if (duration && !isNaN(duration) && duration > 0) {
+
+        // 这里的currentTime单位为秒
+        video.currentTime = this.getCurrentDuration(targetTime);
     }
 
     this.play();
-    
+
     this.state.updatingProgress = true;
     this.startUpdatingProgress();
 }
 
+// 格式化时间
+VideoPlayer.prototype.formatTime = function (duration) {
+    let secs = duration;
+    if (this.timeUnit !== 1) {
+        secs = secs / this.timeUnit;
+    }
+    const minutes = Math.floor(secs / 60);
+    const seconds = Math.floor(secs % 60);
+    return `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+}
+
+// 获取当前的视频时间
+VideoPlayer.prototype.getCurrentDuration = function (duration) {
+    let secs = duration;
+    if (this.timeUnit !== 1) {
+        secs = secs / this.timeUnit;
+    }
+    return secs;
+}
+
 /**
  * 获取视频真实地址
  * @param {string} vid 腾讯视频vid
  * @param {0|1} [type] 类型，0: 标清，1: 高清
  * @returns {Promise<string>} 真实视频地址
  */
-const getVideoURL = async function(vid, type = 1) {
+const getVideoURL = async function (vid, type = 1) {
     const sApiUrl = `https://vv.video.qq.com/getinfo?vid=${vid}&platform=101001&charge=0&otype=json&t=${Date.now()}`;
 
     try {
-        console.log('processing vid through sApiUrl: ', sApiUrl);
+
         const res = await fetchData(sApiUrl);
-        console.log('222 processing vid through sApiUrl: ', sApiUrl);
+
         const processedStr = res.replace('QZOutputJson=', '');
         const jsonStr = processedStr.substring(0, processedStr.length - 1);
         const resObj = JSON.parse(jsonStr);
         const sRealUrl = `${resObj.vl.vi[0].ul.ui[type].url}${resObj.vl.vi[0].fn}?vkey=${resObj.vl.vi[0].fvkey}`;
-        console.log('腾讯视频真实地址: ', sRealUrl);
+
         return sRealUrl;
     } catch (err) {
         console.error(err)
@@ -520,7 +550,7 @@ const getVideoURL = async function(vid, type = 1) {
  * @param {string} url
  * @returns {Promise<string>}
  */
-const fetchData = function(url) {
+const fetchData = function (url) {
     const xhr = new XMLHttpRequest();
     xhr.open('GET', url);
     xhr.send();
@@ -538,8 +568,3 @@ const fetchData = function(url) {
     });
 }
 
-const formatTime = function(secs) {
-    const minutes = Math.floor(secs / 60);
-    const seconds = Math.floor(secs % 60);
-    return `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
-}

package/package.json

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