背景图
HFS3 0.51做的更改

对视频播放的修改

对浏览器原生<video>元素增加以下功能:

  • 长按倍速
  • 左右滑动控制进度条

C:\Users\lzc\AppData\Roaming\npm\node_modules\hfs\frontend\assets\index-2fJMV_na.js中,

查找className:"showing",onLoad:()=>{u.current=n,A(!1)},替换为className:"showing",onLoad:()=>{videocontrol();u.current=n,A(!1)},

然后在文件末尾添加videocontrol函数:

function videocontrol() {
	let temp_rate;
    let start_x, start_y,start_time;
    let isSwiping = false;

    if (!HTMLMediaElement.prototype.hasOwnProperty("playing")) {
        Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
            get: function () {
                return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
            }
        });
    }

    const video = document.querySelector('.showing-container video');
    console.log("video control func begins");

    let longPress = false;
    let clickCount = 0;

    const longPressTime = 500;
    let pressTimer = null;

    const onTouchStart = (event) => {
        start_x = event.touches[0].pageX;
        start_y = event.touches[0].pageY;
        start_time = video.currentTime;

        pressTimer = setTimeout(() => {
            longPress = true;
            event.preventDefault();
            console.log("longPress");
            if (video.playing) {
                temp_rate = video.playbackRate;
                video.playbackRate = temp_rate >= 1.25 ? 3 : 2;
            }
        }, longPressTime);
    };

    const onTouchMove = (event) => {
        
        const delta_x = event.touches[0].pageX - start_x;
        console.log(delta_x);
        // 检测是否为左右滑动
        if (Math.abs(delta_x) > 10) {
            isSwiping = true;
            video.pause();
            clearTimeout(pressTimer);
            // 根据滑动距离计算视频时间调整值
            const seekTime = delta_x * 5;
            video.currentTime =start_time+ seekTime;
        }
    };

    const onTouchEnd = (event) => {
        clearTimeout(pressTimer);
        if (!longPress && !isSwiping) {
            clickCount++;
            setTimeout(() => {
                if (clickCount === 1) {
                    console.log("singleclick");
                    video.removeEventListener('touchstart', onTouchStart);
                } else if (clickCount === 2) {
                    console.log("double click");
                }
                clickCount = 0;
            }, 300);
        } else if (longPress) {
            video.playbackRate = temp_rate;
            longPress = false;
        } else video.play();
        isSwiping = false;
    };

    document.querySelector(".showing-container").addEventListener('touchstart', onTouchStart);
    document.querySelector(".showing-container").addEventListener('touchmove', onTouchMove);
    document.querySelector(".showing-container").addEventListener('touchend', onTouchEnd);

    video.addEventListener('contextmenu', function(e) {
        console.log("contextmenu");
        e.preventDefault();
    });
}

发表您的看法

加载失败,请刷新页面。若该问题持续出现,则可能是评论区被禁用。