对视频播放的修改
对浏览器原生<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();
});
}
发表您的看法