【脚本】B站视频AB复读
const video = document.getElementsByTagName("video")[0];
//获取bpx-player-control-bottom-center容器,更改其布局方式
const div = document.getElementsByClassName("bpx-player-control-bottom-center")[0];
div.style.display = "flex";
div.style.gap = "10px";
// 创建的A按钮
const divA = document.createElement("div");
divA.textContent = "A点";
divA.style.fontSize = "14px";
divA.style.cursor = "pointer";
divA.style.fontWeight = "600";
divA.style.width = "30px";
divA.classList.add("bpx-player-ctrl-btn");
// 创建的B按钮
const divB = document.createElement("div");
divB.textContent = "B点";
divB.style.fontSize = "14px";
divB.style.cursor = "pointer";
divB.style.fontWeight = "600";
divB.style.width = "30px";
divB.classList.add("bpx-player-ctrl-btn");
// 创建的清除循环按钮
const divClear = document.createElement("div");
divClear.textContent = "清除循环";
divClear.style.fontSize = "14px";
divClear.style.cursor = "pointer";
divClear.style.fontWeight = "600";
divClear.style.width = "60px";
divClear.classList.add("bpx-player-ctrl-btn");
//创建标记A
const markA = document.createElement("div");
markA.style.position = "absolute";
markA.style.left = "0px"; //此处设置位置
markA.style.top = "0px";
markA.style.display = "none";
markA.textContent = "????";
//创建标记A
const markB = document.createElement("div");
markB.style.position = "absolute";
markB.style.left = "0px"; //此处设置位置
markB.style.top = "0px";
markB.style.display = "none";
markB.textContent = "????";
let pointA = null;
let pointB = null;
let loopInterval = null;
//添加三个控制按钮
window.onload = function () {
div.append(divA);
div.append(divB);
div.append(divClear);
};
function addMarkA() {
const markContainer = document.getElementsByClassName("bpx-player-progress-area")[0];
markContainer.append(markA);
const width = markContainer.clientWidth; //获取进度的宽度
const duration = video.duration; //获取总时长
markA.style.left = (width / duration) * pointA - 10 + "px";
markA.style.display = "block";
}
function addMarkB() {
const markContainer = document.getElementsByClassName("bpx-player-progress-area")[0];
markContainer.append(markB);
const width = markContainer.clientWidth; //获取进度的宽度
const duration = video.duration; //获取总时长
markB.style.left = (width / duration) * pointB - 10 + "px";
markB.style.display = "block";
}
divA.addEventListener("click", () => {
pointA = video.currentTime;
addMarkA();
});
divB.addEventListener("click", () => {
pointB = video.currentTime;
addMarkB();
start();
});
function start() {
if (pointA !== null && pointB !== null && pointA < pointB) {
clearInterval(loopInterval);
loopInterval = setInterval(() => {
if (video.currentTime >= pointB) {
video.currentTime = pointA;
}
}, 100);
console.log("循环开始", pointA, "to", pointB);
} else {
console.log("请设置循环点");
}
}
divClear.addEventListener("click", () => {
clearInterval(loopInterval);
pointA = null;
pointB = null;
markA.style.display = "none";
markB.style.display = "none";
});
video.addEventListener("ended", () => {
clearInterval(loopInterval);
});
// 在选集中切换视频时，清除循环
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
if(video.src===''){
console.log('视频源为空');
}else{
console.log('视频源已更改:', video.src);
divClear.click()
}
}
});
});
// 配置观察选项
observer.observe(video, { attributes: true });