facebook 短影音停用重播、解除靜音、增加可點擊的進度條

FB 短影音停用重播、解除靜音、增加可點擊的進度條
当前为 2025-07-06 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         facebook 短影音停用重播、解除靜音、增加可點擊的進度條
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  FB 短影音停用重播、解除靜音、增加可點擊的進度條
// @author       shanlan(ChatGPT o3-mini)
// @match        *://www.facebook.com/*
// @grant        none
// @run-at       document-end
// @license      MIT
// ==/UserScript==

(function() {
'use strict';

const addOverlay = video => {
if(video._ov) return;
const ov = document.createElement('div');
ov.style.cssText = "position:fixed; background:transparent; z-index:1000000; pointer-events:auto;";
document.body.appendChild(ov);
video._ov = ov;

const prog = document.createElement('div');
prog.style.cssText = "height:100%; width:0%; background:#f00;";
ov.appendChild(prog);

// 利用 requestAnimationFrame 持續更新覆蓋層位置
const update = () => {
const r = video.getBoundingClientRect();
ov.style.left = r.left + "px";
ov.style.top = (r.bottom - 8) + "px";
ov.style.width = r.width + "px";
ov.style.height = "8px";
requestAnimationFrame(update);
};
requestAnimationFrame(update);

// 進度條更新
video.addEventListener('timeupdate', ()=> {
if(video.duration) prog.style.width = (video.currentTime/video.duration*100) + '%';
});

// 點擊事件：根據點擊位置調整播放進度
ov.addEventListener('pointerdown', e => {
e.preventDefault();
e.stopPropagation();
const r = ov.getBoundingClientRect();
const pct = (e.clientX - r.left) / r.width;
if(video.duration) video.currentTime = video.duration * pct;
}, true);
};

const enhance = video => {
if(video._enhanced) return;
video._enhanced = 1;
video.loop = false;
video.addEventListener('ended', ()=> {
video.pause();
video.currentTime = video.duration;
});

// 修改解除靜音部分：定義解除靜音函式並立即檢查 video 狀態
const unmute = () => {
video.muted = false;
video.volume = 1;
};
// 綁定一次性事件
video.addEventListener('canplay', unmute, { once: true });
// 如果影片狀態已就緒，立即解除靜音
if(video.readyState > 2) {
unmute();
}

addOverlay(video);
};

const scan = node => {
if(!node) return;
if(node.nodeName === 'VIDEO') enhance(node);
else node.querySelectorAll?.('video').forEach(enhance);
};

new MutationObserver(muts => {
muts.forEach(m => m.addedNodes.forEach(scan));
}).observe(document.body, {childList:true, subtree:true});

document.querySelectorAll('video').forEach(enhance);
})();
欢迎访问Greasy Fork镜像
