tencent.jquery.pix.component 1.0.77 → 1.0.78

package/components/video/videoplayer.js

@@ -1,758 +1,767 @@
-import { $, windowEnv } from "../config";
-import './videocss.scss';
-import VideoHTML from "./videohtml";
-
-/**
- * @typedef {"play" | "pause" | "stop" | "enterFullScreen" | "exitFullScreen"} VideoPlayerState
- * 视频播放器状态
- */
-
-/**
- * 在页面上放置一个视频播放器组件（腾讯视频）
- * @constructor
- * @param {object} options 选项
- * @param {string} options.container 容器元素的jquery选择器
- * @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] 是否显示进度条
- * @param {boolean} [options.showVolumeControl=false] 是否显示音量控制
- * @param {boolean} [options.clickToPause=false] 点击播放区域是否直接暂停，true: 直接暂停，false: 先展示控制条
- * @param {(this: VideoPlayer, type: VideoPlayerState) => any} [options.stateChanged] 状态变化回调
- */
-export function VideoPlayer(options) {
-    this.options = options
-    if (typeof this.options.stateChanged !== 'function') {
-        this.options.stateChanged = () => { };
-    }
-    this.init()
-}
-
-VideoPlayer.prototype.init = async function () {
-    if ('timeUnit' in this.options) {
-        // 浏览器，单位s ; PixUI，单位ms
-        this.timeUnit = Number(this.options.timeUnit) || 1;
-    } else {
-        if (windowEnv === 'pix') {
-            this.timeUnit = 1000;
-        } else {
-            this.timeUnit = 1;
-        }
-    }
-
-
-
-    const $container = $(this.options.container);
-    this.$container = $container;
-    $container.html(VideoHTML);
-
-    if (this.options.previewUrl) {
-        $container.find('.myplayer-video-preview').css('background-image', `url(${this.options.previewUrl})`);
-    }
-
-    // 缺省选项
-    this.options = {
-        videoType: 1,
-        autoHideControlsDelayMs: 5000,
-        showProgressBar: true,
-        showVolumeControl: false,
-        clickToPause: false,
-        ...this.options
-    }
-    //如果vid不存在，则直接获取option.videoUrl
-    const videoURL = this.options.vid ? await getVideoURL(this.options.vid, this.options.videoType) : this.options.videoUrl;
-    //如果videoUrl不存在，则抛出错误
-    if (!videoURL) {
-
-        throw new Error('videoURL is required');
-
-    }
-    $container.find('.myplayer-video-mask').before(`<video src="${videoURL}"></video>`);
-
-    this.state = {
-        playing: false,
-        controlsVisible: false,
-        updatingProgress: false,
-        controlsDelayStart: 0,
-        firstPlay: true,
-        isFullScreen: false,
-        originalParent: null,  // 保存原始父容器引用
-        originalNextSibling: null,  // 保存原始位置的下一个兄弟节点
-    }
-
-    // 根据showProgressBar选项控制进度条显示
-    if (!this.options.showProgressBar) {
-        $container.find('.myplayer-progress').hide();
-    }
-
-    // 根据showVolumeControl选项控制音量控件显示
-    if (this.options.showVolumeControl) {
-        $container.find('.myplayer-volume').show();
-        // 初始化音量状态
-        this.state.volume = 50;
-        this.state.volumePanelVisible = false;
-        this.updateVolumeDisplay(50);
-    } else {
-        $container.find('.myplayer-volume').hide();
-    }
-
-    this.bindEvent();
-}
-
-VideoPlayer.prototype.bindEvent = function () {
-    const container = this.$container;
-    container.off()
-        .on('click', '.myplayer-video-cover', () => {
-            this.play();
-        })
-        .on('click', '.myplayer-video-mask', () => {
-            this.maskClicked();
-        })
-        .on('click', '.myplayer-btn-play', () => {
-            this.play();
-        })
-        .on('click', '.myplayer-btn-pause', () => {
-            this.pause();
-        })
-        .on('click', '.myplayer-btn-full-screen', () => {
-            this.toggleFullScreen();
-        })
-        .on('click', '.myplayer-btn-exit-full-screen', () => {
-            this.toggleFullScreen();
-        })
-        .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') })
-            .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);
-                } else {
-                    this.progressDragStart(e);
-                }
-            })
-            .on('drag', '.myplayer-progress', (e) => {
-                if (e.originalEvent) {
-                    this.progressDrag(e.originalEvent);
-                } else {
-                    this.progressDrag(e);
-                }
-            })
-            .on('dragend', '.myplayer-progress', (e) => {
-                if (e.originalEvent) {
-                    this.progressDragEnd(e.originalEvent);
-                } else {
-                    this.progressDragEnd(e);
-                }
-            })
-            .on('click', '.myplayer-progress', (e) => {
-                if (e.originalEvent) {
-                    this.progressDragEnd(e.originalEvent);
-                } else {
-                    this.progressDragEnd(e);
-                }
-            });
-    }
-
-    // 只有在显示音量控件时才绑定音量相关事件
-    if (this.options.showVolumeControl) {
-        container
-            .on('click', '.myplayer-volume-icon', () => {
-                this.toggleVolumePanel();
-            })
-            .on('click', '.myplayer-volume-off-icon', () => {
-                this.toggleVolumePanel();
-            })
-            .on('drag', '.myplayer-volume-line', (e) => {
-                if (e.originalEvent) {
-                    this.volumeDrag(e.originalEvent);
-                } else {
-                    this.volumeDrag(e);
-                }
-            })
-            .on('dragend', '.myplayer-volume-line', (e) => {
-                if (e.originalEvent) {
-                    this.volumeDragEnd(e.originalEvent);
-                } else {
-                    this.volumeDragEnd(e);
-                }
-            })
-            .on('click', '.myplayer-volume-line', (e) => {
-                if (e.originalEvent) {
-                    this.volumeDragEnd(e.originalEvent);
-                } else {
-                    this.volumeDragEnd(e);
-                }
-            });
-    }
-}
-
-VideoPlayer.prototype.play = function () {
-    if (this.state.firstPlay) {
-        this.state.firstPlay = false;
-        this.$container.find('.myplayer-video-cover,.myplayer-video-preview').hide();
-        this.updateTotalTime();
-    }
-    const video = this.$container.find('video')[0];
-    video.play();
-    this.state.playing = true;
-    if (this.options.showVolumeControl) {
-        const volume = Math.round(video.volume * 100);
-        this.state.volume = volume;
-        this.updateVolumeDisplay(volume);
-    }
-    this.$container.find('.myplayer-btn-play').hide();
-    this.$container.find('.myplayer-btn-big-play').addClass('myplayer-transparent');
-    this.$container.find('.myplayer-btn-pause').show();
-    this.$container.find('.myplayer-progress').removeClass('myplayer-progress-bold');
-    this.startUpdatingProgress();
-    this.hideControlsWithDelay();
-    this.options.stateChanged.call(this, 'play');
-}
-
-VideoPlayer.prototype.pause = function () {
-    this.showControls();
-    const video = this.$container.find('video')[0];
-    video.pause();
-    this.state.playing = false;
-    this.$container.find('.myplayer-btn-play').show();
-    this.$container.find('.myplayer-btn-big-play').removeClass('myplayer-transparent');
-    this.$container.find('.myplayer-btn-pause').hide();
-    this.$container.find('.myplayer-progress').addClass('myplayer-progress-bold');
-    this.state.controlsDelayStart = Date.now();
-    this.options.stateChanged.call(this, 'pause');
-}
-
-VideoPlayer.prototype.stop = function () {
-
-    const video = this.$container.find('video')[0];
-    video.pause();
-    video.currentTime = 0;
-    this.state.playing = false;
-    this.$container.find('.myplayer-btn-play').show();
-    this.$container.find('.myplayer-btn-big-play').removeClass('myplayer-transparent');
-    this.$container.find('.myplayer-btn-pause').hide();
-    this.$container.find('.myplayer-progress').addClass('myplayer-progress-bold');
-    this.state.controlsDelayStart = Date.now();
-    this.$container.find('.myplayer-video-cover,.myplayer-video-preview').show();
-    this.state.firstPlay = true;
-    this.options.stateChanged.call(this, 'stop');
-}
-
-VideoPlayer.prototype.maskClicked = function () {
-    if (this.state.volumePanelVisible) {
-        this.toggleVolumePanel();
-        return;
-    }
-
-    if (this.state.controlsVisible === true) {
-        if (this.state.playing === true) {
-            this.pause();
-        } else {
-            this.play();
-        }
-    } else {
-        if (this.options.clickToPause && this.state.playing === true) {
-            // 如果配置了点击直接暂停，且正在播放，则直接暂停
-            this.pause();
-        } else {
-            // 否则先展示控制条
-            this.showControls();
-        }
-    }
-}
-
-VideoPlayer.prototype.showControls = function () {
-    const container = this.$container;
-    container.find('.myplayer-video-mask').removeClass('myplayer-transparent');
-    container.find('.myplayer-top').removeClass('myplayer-transparent');
-    container.find('.myplayer-bottom').removeClass('myplayer-transparent');
-    this.state.controlsVisible = true;
-    this.state.updatingProgress = true;
-    this.updateTotalTime();
-    this.startUpdatingProgress();
-
-    this.hideControlsWithDelay();
-}
-
-VideoPlayer.prototype.hideControls = function () {
-    const container = this.$container;
-    container.find('.myplayer-video-mask').addClass('myplayer-transparent');
-    container.find('.myplayer-top').addClass('myplayer-transparent');
-    container.find('.myplayer-bottom').addClass('myplayer-transparent');
-    this.state.controlsVisible = false;
-    this.state.updatingProgress = false;
-}
-
-VideoPlayer.prototype.hideControlsWithDelay = function () {
-    this.state.controlsDelayStart = Date.now();
-    setTimeout(() => {
-        const nowTime = Date.now();
-        // console.debug("nowTime - this.state.controlsDelayStart", nowTime - this.state.controlsDelayStart);
-
-        // 有时正常时间差也会小于设定的时间，所以判断时减去100ms
-        if (!this.state.volumePanelVisible && this.state.playing === true && nowTime - this.state.controlsDelayStart >= this.options.autoHideControlsDelayMs - 100) {
-            this.hideControls();
-        }
-    }, this.options.autoHideControlsDelayMs);
-}
-
-VideoPlayer.prototype.startUpdatingProgress = function () {
-    this.updateProgress();
-
-    if (this.state.updatingProgress) {
-        window.requestAnimationFrame(this.startUpdatingProgress.bind(this));
-    }
-}
-
-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;
-        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();
-        }
-    }
-
-    // 格式化当前播放时间（currentTime单位为秒）
-    this.$container.find('.myplayer-playtime').html(this.formatTime(currentTime));
-}
-
-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(this.formatTime(duration));
-    }
-}
-
-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');
-    const bottom = $container.find('.myplayer-bottom');
-    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');
-    }
-
-    this.hideControlsWithDelay();
-}
-
-VideoPlayer.prototype.setFullScreen = function (target = true) {
-    const $container = this.$container;
-    const fullScreenBtn = $container.find('.myplayer-btn-full-screen');
-    const exitFullScreenBtn = $container.find('.myplayer-btn-exit-full-screen');
-    const bottom = $container.find('.myplayer-bottom');
-    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();
-
-    const video = this.$container.find('video')[0];
-    if (this.state.playing && typeof video?.play === 'function') {
-        video.play(); // 部分PixUI运行环境在元素移动后，video元素会自动暂停，需要手动播放
-    }
-}
-
-/**
- * 将容器移回原位置（退出全屏时调用）
- * @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();
-
-    const video = this.$container.find('video')[0];
-    if (this.state.playing && typeof video?.play === 'function') {
-        video.play(); // 部分PixUI运行环境在元素移动后，video元素会自动暂停，需要手动播放
-    }
-}
-
-/**
- * 进度条拖动开始
- * @param {MouseEvent} e 
- */
-VideoPlayer.prototype.progressDragStart = function (e) {
-    if (!this.options.showProgressBar) {
-        return;
-    }
-
-    this.state.updatingProgress = false;
-    if (this.state.playing === true) {
-        this.pause();
-    }
-}
-
-/**
- * 进度条拖动
- * @param {MouseEvent} 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');
-    const video = $container.find('video')[0];
-
-    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);
-
-    subprogress.width(`${curOffset}px`);
-    const adjustedPlayTime = curOffset / parentWidth * video.duration;
-    $container.find('.myplayer-playtime').html(this.formatTime(adjustedPlayTime));
-}
-
-/**
- * 进度条拖动结束
- * @param {MouseEvent} 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) * duration;
-
-    // 确保duration有效再设置currentTime
-    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;
-}
-
-/**
- * 切换音量面板显示/隐藏
- */
-VideoPlayer.prototype.toggleVolumePanel = function () {
-    if (!this.options.showVolumeControl) {
-        return;
-    }
-
-    const $volumeRate = this.$container.find('.myplayer-volume-rate');
-    if (this.state.volumePanelVisible) {
-        $volumeRate.hide();
-        this.state.volumePanelVisible = false;
-        this.hideControlsWithDelay();
-    } else {
-        $volumeRate.show();
-        this.state.volumePanelVisible = true;
-    }
-}
-
-/**
- * 更新音量显示
- * @param {number} volume - 音量值 0-100
- */
-VideoPlayer.prototype.updateVolumeDisplay = function (volume) {
-    const $container = this.$container;
-    $container.find('.myplayer-volume-rate text').text(Math.round(volume));
-    $container.find('.myplayer-volume-subline').css('height', `${volume}%`);
-
-    // 根据音量更新图标显示
-    if (volume === 0) {
-        $container.find('.myplayer-volume-icon').hide();
-        $container.find('.myplayer-volume-off-icon').show();
-    } else {
-        $container.find('.myplayer-volume-icon').show();
-        $container.find('.myplayer-volume-off-icon').hide();
-    }
-}
-
-/**
- * 设置视频音量
- * @param {number} volume - 音量值 0-100
- */
-VideoPlayer.prototype.setVolume = function (volume) {
-    const video = this.$container.find('video')[0];
-    if (!video) return;
-
-    // 限制音量范围 0-100
-    volume = Math.max(0, Math.min(100, volume));
-    this.state.volume = volume;
-
-    // video.volume 范围是 0-1
-    video.volume = volume / 100;
-    video.muted = volume === 0;
-
-    this.updateVolumeDisplay(volume);
-}
-
-/**
- * 音量条拖动中
- * @param {MouseEvent} e
- */
-VideoPlayer.prototype.volumeDrag = function (e) {
-    this.setVolumeByMouseEvent(e);
-}
-
-/**
- * 音量条拖动结束
- * @param {MouseEvent} e
- */
-VideoPlayer.prototype.volumeDragEnd = function (e) {
-    this.setVolumeByMouseEvent(e);
-}
-
-VideoPlayer.prototype.setVolumeByMouseEvent = function (e) {
-    if (!this.options.showVolumeControl) {
-        return;
-    }
-
-    const $container = this.$container;
-    const volumeLine = $container.find('.myplayer-volume-line');
-
-    const parentHeight = volumeLine.height();
-    // 使用getBoundingClientRect计算准确的点击位置
-    const rect = volumeLine[0].getBoundingClientRect();
-    const clientY = e.clientY != undefined ? e.clientY : (e.touches ? e.touches[0].clientY : 0);
-    // 音量条是从下往上增长的，所以需要反转计算
-    const curOffset = Math.max(Math.min(rect.bottom - clientY, parentHeight), 0);
-
-    const volume = (curOffset / parentHeight) * 100;
-    if (!isFinite(volume)) {
-        return;
-    }
-    this.updateVolumeDisplay(volume);
-    this.setVolume(volume);
-}
-
-/**
- * 清理VideoPlayer实例，移除所有事件监听器、定时器、DOM元素等
- */
-VideoPlayer.prototype.remove = function () {
-    // 停止视频播放
-    this.stop();
-    
-    // 停止所有定时器和动画帧
-    this.state.updatingProgress = false;
-    
-    // 如果处于全屏状态，先退出全屏
-    if (this.state.isFullScreen) {
-        this._moveBackToOriginal();
-    }
-    
-    // 移除所有事件监听器
-    this.$container.off();
-    
-    // 移除document.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');
-    
-    // 清理容器内容
-    this.$container.empty();
-}
-
-/**
- * 获取视频真实地址
- * @param {string} vid 腾讯视频vid
- * @param {0|1} [type] 类型，0: 标清，1: 高清
- * @returns {Promise<string>} 真实视频地址
- */
-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 {
-
-        const res = await fetchData(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}`;
-
-        return sRealUrl;
-    } catch (err) {
-        console.error(err)
-        return '';
-    }
-}
-
-/**
- * 异步get请求
- * @param {string} url
- * @returns {Promise<string>}
- */
-const fetchData = function (url) {
-    const xhr = new XMLHttpRequest();
-    xhr.open('GET', url);
-    xhr.send();
-
-    return new Promise((resolve, reject) => {
-        xhr.onreadystatechange = function () {
-            if (xhr.readyState === 4) {
-                if (xhr.status === 200) {
-                    resolve(xhr.responseText); // 请求成功，返回响应内容
-                } else {
-                    reject(new Error('请求失败')); // 请求失败，返回错误对象
-                }
-            }
-        };
-    });
-}
+import { $, windowEnv } from "../config";
+import './videocss.scss';
+import VideoHTML from "./videohtml";
+
+/**
+ * @typedef {"play" | "pause" | "stop" | "enterFullScreen" | "exitFullScreen"} VideoPlayerState
+ * 视频播放器状态
+ */
+
+/**
+ * 在页面上放置一个视频播放器组件（腾讯视频）
+ * @constructor
+ * @param {object} options 选项
+ * @param {string} options.container 容器元素的jquery选择器
+ * @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] 是否显示进度条
+ * @param {boolean} [options.showVolumeControl=false] 是否显示音量控制
+ * @param {boolean} [options.showProgressHandle=true] 是否显示进度条滑块
+ * @param {boolean} [options.clickToPause=false] 点击播放区域是否直接暂停，true: 直接暂停，false: 先展示控制条
+ * @param {(this: VideoPlayer, type: VideoPlayerState) => any} [options.stateChanged] 状态变化回调
+ */
+export function VideoPlayer(options) {
+    this.options = options
+    if (typeof this.options.stateChanged !== 'function') {
+        this.options.stateChanged = () => { };
+    }
+    this.init()
+}
+
+VideoPlayer.prototype.init = async function () {
+    if ('timeUnit' in this.options) {
+        // 浏览器，单位s ; PixUI，单位ms
+        this.timeUnit = Number(this.options.timeUnit) || 1;
+    } else {
+        if (windowEnv === 'pix') {
+            this.timeUnit = 1000;
+        } else {
+            this.timeUnit = 1;
+        }
+    }
+
+
+
+    const $container = $(this.options.container);
+    this.$container = $container;
+    $container.html(VideoHTML);
+
+    if (this.options.previewUrl) {
+        $container.find('.myplayer-video-preview').css('background-image', `url(${this.options.previewUrl})`);
+    }
+
+    // 缺省选项
+    this.options = {
+        videoType: 1,
+        autoHideControlsDelayMs: 5000,
+        showProgressBar: true,
+        showVolumeControl: false,
+        showProgressHandle: true,
+        clickToPause: false,
+        ...this.options
+    }
+    //如果vid不存在，则直接获取option.videoUrl
+    const videoURL = this.options.vid ? await getVideoURL(this.options.vid, this.options.videoType) : this.options.videoUrl;
+    //如果videoUrl不存在，则抛出错误
+    if (!videoURL) {
+
+        throw new Error('videoURL is required');
+
+    }
+    $container.find('.myplayer-video-mask').before(`<video src="${videoURL}"></video>`);
+
+    this.state = {
+        playing: false,
+        controlsVisible: false,
+        updatingProgress: false,
+        controlsDelayStart: 0,
+        firstPlay: true,
+        isFullScreen: false,
+        originalParent: null,  // 保存原始父容器引用
+        originalNextSibling: null,  // 保存原始位置的下一个兄弟节点
+    }
+
+    // 根据showProgressBar选项控制进度条显示
+    if (!this.options.showProgressBar) {
+        $container.find('.myplayer-progress').hide();
+    }
+
+    // 根据showProgressHandle选项控制进度条滑块显示
+    if (!this.options.showProgressHandle) {
+        $container.find('.myplayer-progress-handle').hide();
+    }
+
+    // 根据showVolumeControl选项控制音量控件显示
+    if (this.options.showVolumeControl) {
+        $container.find('.myplayer-volume').show();
+        // 初始化音量状态
+        this.state.volume = 50;
+        this.state.volumePanelVisible = false;
+        this.updateVolumeDisplay(50);
+    } else {
+        $container.find('.myplayer-volume').hide();
+    }
+
+    this.bindEvent();
+}
+
+VideoPlayer.prototype.bindEvent = function () {
+    const container = this.$container;
+    container.off()
+        .on('click', '.myplayer-video-cover', () => {
+            this.play();
+        })
+        .on('click', '.myplayer-video-mask', () => {
+            this.maskClicked();
+        })
+        .on('click', '.myplayer-btn-play', () => {
+            this.play();
+        })
+        .on('click', '.myplayer-btn-pause', () => {
+            this.pause();
+        })
+        .on('click', '.myplayer-btn-full-screen', () => {
+            this.toggleFullScreen();
+        })
+        .on('click', '.myplayer-btn-exit-full-screen', () => {
+            this.toggleFullScreen();
+        })
+        .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') })
+            .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);
+                } else {
+                    this.progressDragStart(e);
+                }
+            })
+            .on('drag', '.myplayer-progress', (e) => {
+                if (e.originalEvent) {
+                    this.progressDrag(e.originalEvent);
+                } else {
+                    this.progressDrag(e);
+                }
+            })
+            .on('dragend', '.myplayer-progress', (e) => {
+                if (e.originalEvent) {
+                    this.progressDragEnd(e.originalEvent);
+                } else {
+                    this.progressDragEnd(e);
+                }
+            })
+            .on('click', '.myplayer-progress', (e) => {
+                if (e.originalEvent) {
+                    this.progressDragEnd(e.originalEvent);
+                } else {
+                    this.progressDragEnd(e);
+                }
+            });
+    }
+
+    // 只有在显示音量控件时才绑定音量相关事件
+    if (this.options.showVolumeControl) {
+        container
+            .on('click', '.myplayer-volume-icon', () => {
+                this.toggleVolumePanel();
+            })
+            .on('click', '.myplayer-volume-off-icon', () => {
+                this.toggleVolumePanel();
+            })
+            .on('drag', '.myplayer-volume-line', (e) => {
+                if (e.originalEvent) {
+                    this.volumeDrag(e.originalEvent);
+                } else {
+                    this.volumeDrag(e);
+                }
+            })
+            .on('dragend', '.myplayer-volume-line', (e) => {
+                if (e.originalEvent) {
+                    this.volumeDragEnd(e.originalEvent);
+                } else {
+                    this.volumeDragEnd(e);
+                }
+            })
+            .on('click', '.myplayer-volume-line', (e) => {
+                if (e.originalEvent) {
+                    this.volumeDragEnd(e.originalEvent);
+                } else {
+                    this.volumeDragEnd(e);
+                }
+            });
+    }
+}
+
+VideoPlayer.prototype.play = function () {
+    if (this.state.firstPlay) {
+        this.state.firstPlay = false;
+        this.$container.find('.myplayer-video-cover,.myplayer-video-preview').hide();
+        this.updateTotalTime();
+    }
+    const video = this.$container.find('video')[0];
+    video.play();
+    this.state.playing = true;
+    if (this.options.showVolumeControl) {
+        const volume = Math.round(video.volume * 100);
+        this.state.volume = volume;
+        this.updateVolumeDisplay(volume);
+    }
+    this.$container.find('.myplayer-btn-play').hide();
+    this.$container.find('.myplayer-btn-big-play').addClass('myplayer-transparent');
+    this.$container.find('.myplayer-btn-pause').show();
+    this.$container.find('.myplayer-progress').removeClass('myplayer-progress-bold');
+    this.startUpdatingProgress();
+    this.hideControlsWithDelay();
+    this.options.stateChanged.call(this, 'play');
+}
+
+VideoPlayer.prototype.pause = function () {
+    this.showControls();
+    const video = this.$container.find('video')[0];
+    video.pause();
+    this.state.playing = false;
+    this.$container.find('.myplayer-btn-play').show();
+    this.$container.find('.myplayer-btn-big-play').removeClass('myplayer-transparent');
+    this.$container.find('.myplayer-btn-pause').hide();
+    this.$container.find('.myplayer-progress').addClass('myplayer-progress-bold');
+    this.state.controlsDelayStart = Date.now();
+    this.options.stateChanged.call(this, 'pause');
+}
+
+VideoPlayer.prototype.stop = function () {
+
+    const video = this.$container.find('video')[0];
+    video.pause();
+    video.currentTime = 0;
+    this.state.playing = false;
+    this.$container.find('.myplayer-btn-play').show();
+    this.$container.find('.myplayer-btn-big-play').removeClass('myplayer-transparent');
+    this.$container.find('.myplayer-btn-pause').hide();
+    this.$container.find('.myplayer-progress').addClass('myplayer-progress-bold');
+    this.state.controlsDelayStart = Date.now();
+    this.$container.find('.myplayer-video-cover,.myplayer-video-preview').show();
+    this.state.firstPlay = true;
+    this.options.stateChanged.call(this, 'stop');
+}
+
+VideoPlayer.prototype.maskClicked = function () {
+    if (this.state.volumePanelVisible) {
+        this.toggleVolumePanel();
+        return;
+    }
+
+    if (this.state.controlsVisible === true) {
+        if (this.state.playing === true) {
+            this.pause();
+        } else {
+            this.play();
+        }
+    } else {
+        if (this.options.clickToPause && this.state.playing === true) {
+            // 如果配置了点击直接暂停，且正在播放，则直接暂停
+            this.pause();
+        } else {
+            // 否则先展示控制条
+            this.showControls();
+        }
+    }
+}
+
+VideoPlayer.prototype.showControls = function () {
+    const container = this.$container;
+    container.find('.myplayer-video-mask').removeClass('myplayer-transparent');
+    container.find('.myplayer-top').removeClass('myplayer-transparent');
+    container.find('.myplayer-bottom').removeClass('myplayer-transparent');
+    this.state.controlsVisible = true;
+    this.state.updatingProgress = true;
+    this.updateTotalTime();
+    this.startUpdatingProgress();
+
+    this.hideControlsWithDelay();
+}
+
+VideoPlayer.prototype.hideControls = function () {
+    const container = this.$container;
+    container.find('.myplayer-video-mask').addClass('myplayer-transparent');
+    container.find('.myplayer-top').addClass('myplayer-transparent');
+    container.find('.myplayer-bottom').addClass('myplayer-transparent');
+    this.state.controlsVisible = false;
+    this.state.updatingProgress = false;
+}
+
+VideoPlayer.prototype.hideControlsWithDelay = function () {
+    this.state.controlsDelayStart = Date.now();
+    setTimeout(() => {
+        const nowTime = Date.now();
+        // console.debug("nowTime - this.state.controlsDelayStart", nowTime - this.state.controlsDelayStart);
+
+        // 有时正常时间差也会小于设定的时间，所以判断时减去100ms
+        if (!this.state.volumePanelVisible && this.state.playing === true && nowTime - this.state.controlsDelayStart >= this.options.autoHideControlsDelayMs - 100) {
+            this.hideControls();
+        }
+    }, this.options.autoHideControlsDelayMs);
+}
+
+VideoPlayer.prototype.startUpdatingProgress = function () {
+    this.updateProgress();
+
+    if (this.state.updatingProgress) {
+        window.requestAnimationFrame(this.startUpdatingProgress.bind(this));
+    }
+}
+
+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;
+        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();
+        }
+    }
+
+    // 格式化当前播放时间（currentTime单位为秒）
+    this.$container.find('.myplayer-playtime').html(this.formatTime(currentTime));
+}
+
+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(this.formatTime(duration));
+    }
+}
+
+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');
+    const bottom = $container.find('.myplayer-bottom');
+    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');
+    }
+
+    this.hideControlsWithDelay();
+}
+
+VideoPlayer.prototype.setFullScreen = function (target = true) {
+    const $container = this.$container;
+    const fullScreenBtn = $container.find('.myplayer-btn-full-screen');
+    const exitFullScreenBtn = $container.find('.myplayer-btn-exit-full-screen');
+    const bottom = $container.find('.myplayer-bottom');
+    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();
+
+    const video = this.$container.find('video')[0];
+    if (this.state.playing && typeof video?.play === 'function') {
+        video.play(); // 部分PixUI运行环境在元素移动后，video元素会自动暂停，需要手动播放
+    }
+}
+
+/**
+ * 将容器移回原位置（退出全屏时调用）
+ * @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();
+
+    const video = this.$container.find('video')[0];
+    if (this.state.playing && typeof video?.play === 'function') {
+        video.play(); // 部分PixUI运行环境在元素移动后，video元素会自动暂停，需要手动播放
+    }
+}
+
+/**
+ * 进度条拖动开始
+ * @param {MouseEvent} e 
+ */
+VideoPlayer.prototype.progressDragStart = function (e) {
+    if (!this.options.showProgressBar) {
+        return;
+    }
+    if (this.state.playing === true) {
+        this.pause();
+    }
+
+    // 更新进度条时，不更新播放时间
+    // 这个赋值必须放在最后，因为pause会设置this.state.updatingProgress为true
+    this.state.updatingProgress = false;
+}
+
+/**
+ * 进度条拖动
+ * @param {MouseEvent} 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');
+    const video = $container.find('video')[0];
+
+    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);
+
+    subprogress.width(`${curOffset}px`);
+    const adjustedPlayTime = curOffset / parentWidth * video.duration;
+    $container.find('.myplayer-playtime').html(this.formatTime(adjustedPlayTime));
+}
+
+/**
+ * 进度条拖动结束
+ * @param {MouseEvent} 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) * duration;
+
+    // 确保duration有效再设置currentTime
+    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;
+}
+
+/**
+ * 切换音量面板显示/隐藏
+ */
+VideoPlayer.prototype.toggleVolumePanel = function () {
+    if (!this.options.showVolumeControl) {
+        return;
+    }
+
+    const $volumeRate = this.$container.find('.myplayer-volume-rate');
+    if (this.state.volumePanelVisible) {
+        $volumeRate.hide();
+        this.state.volumePanelVisible = false;
+        this.hideControlsWithDelay();
+    } else {
+        $volumeRate.show();
+        this.state.volumePanelVisible = true;
+    }
+}
+
+/**
+ * 更新音量显示
+ * @param {number} volume - 音量值 0-100
+ */
+VideoPlayer.prototype.updateVolumeDisplay = function (volume) {
+    const $container = this.$container;
+    $container.find('.myplayer-volume-rate text').text(Math.round(volume));
+    $container.find('.myplayer-volume-subline').css('height', `${volume}%`);
+
+    // 根据音量更新图标显示
+    if (volume === 0) {
+        $container.find('.myplayer-volume-icon').hide();
+        $container.find('.myplayer-volume-off-icon').show();
+    } else {
+        $container.find('.myplayer-volume-icon').show();
+        $container.find('.myplayer-volume-off-icon').hide();
+    }
+}
+
+/**
+ * 设置视频音量
+ * @param {number} volume - 音量值 0-100
+ */
+VideoPlayer.prototype.setVolume = function (volume) {
+    const video = this.$container.find('video')[0];
+    if (!video) return;
+
+    // 限制音量范围 0-100
+    volume = Math.max(0, Math.min(100, volume));
+    this.state.volume = volume;
+
+    // video.volume 范围是 0-1
+    video.volume = volume / 100;
+    video.muted = volume === 0;
+
+    this.updateVolumeDisplay(volume);
+}
+
+/**
+ * 音量条拖动中
+ * @param {MouseEvent} e
+ */
+VideoPlayer.prototype.volumeDrag = function (e) {
+    this.setVolumeByMouseEvent(e);
+}
+
+/**
+ * 音量条拖动结束
+ * @param {MouseEvent} e
+ */
+VideoPlayer.prototype.volumeDragEnd = function (e) {
+    this.setVolumeByMouseEvent(e);
+}
+
+VideoPlayer.prototype.setVolumeByMouseEvent = function (e) {
+    if (!this.options.showVolumeControl) {
+        return;
+    }
+
+    const $container = this.$container;
+    const volumeLine = $container.find('.myplayer-volume-line');
+
+    const parentHeight = volumeLine.height();
+    // 使用getBoundingClientRect计算准确的点击位置
+    const rect = volumeLine[0].getBoundingClientRect();
+    const clientY = e.clientY != undefined ? e.clientY : (e.touches ? e.touches[0].clientY : 0);
+    // 音量条是从下往上增长的，所以需要反转计算
+    const curOffset = Math.max(Math.min(rect.bottom - clientY, parentHeight), 0);
+
+    const volume = (curOffset / parentHeight) * 100;
+    if (!isFinite(volume)) {
+        return;
+    }
+    this.updateVolumeDisplay(volume);
+    this.setVolume(volume);
+}
+
+/**
+ * 清理VideoPlayer实例，移除所有事件监听器、定时器、DOM元素等
+ */
+VideoPlayer.prototype.remove = function () {
+    // 停止视频播放
+    this.stop();
+    
+    // 停止所有定时器和动画帧
+    this.state.updatingProgress = false;
+    
+    // 如果处于全屏状态，先退出全屏
+    if (this.state.isFullScreen) {
+        this._moveBackToOriginal();
+    }
+    
+    // 移除所有事件监听器
+    this.$container.off();
+    
+    // 移除document.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');
+    
+    // 清理容器内容
+    this.$container.empty();
+}
+
+/**
+ * 获取视频真实地址
+ * @param {string} vid 腾讯视频vid
+ * @param {0|1} [type] 类型，0: 标清，1: 高清
+ * @returns {Promise<string>} 真实视频地址
+ */
+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 {
+
+        const res = await fetchData(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}`;
+
+        return sRealUrl;
+    } catch (err) {
+        console.error(err)
+        return '';
+    }
+}
+
+/**
+ * 异步get请求
+ * @param {string} url
+ * @returns {Promise<string>}
+ */
+const fetchData = function (url) {
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', url);
+    xhr.send();
+
+    return new Promise((resolve, reject) => {
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState === 4) {
+                if (xhr.status === 200) {
+                    resolve(xhr.responseText); // 请求成功，返回响应内容
+                } else {
+                    reject(new Error('请求失败')); // 请求失败，返回错误对象
+                }
+            }
+        };
+    });
+}