Last active 1730290493

这是一个Chrome插件。安装后,在浏览器打开 CCTV 的电视直播网站时,自动将视频全屏,并支持[]键换台

Revision fe0c1b6aa68d2ca718093aa8d18a1a4bd746f5eb

content.js Raw
1// 函数:将视频元素设置为覆盖整个窗口
2function makeVideoFullWindow(video) {
3 console.log('Making video full window.');
4
5 // 设置视频的样式,使其占据整个页面
6 video.style.position = 'fixed';
7 video.style.top = '0';
8 video.style.left = '0';
9 video.style.width = '100vw';
10 video.style.height = '100vh';
11 video.style.zIndex = '9999'; // 保证视频位于所有元素上方
12 video.style.backgroundColor = 'black'; // 确保背景为黑色,避免干扰
13
14 // 隐藏滚动条
15 document.documentElement.style.overflow = 'hidden';
16
17document.querySelectorAll('.nav_wrapper_bg.newtopbz').forEach(element => {
18 element.remove();
19})
20document.querySelectorAll('.header_nav.newtopbzTV').forEach(element => {
21 element.remove();
22})
23document.querySelectorAll('.phone').forEach(element => {
24 element.remove();
25})
26
27 console.log('Video is now fullscreen-like.');
28}
29
30// 函数:恢复视频原始状态
31function resetVideo(video) {
32 console.log('Resetting video to original state.');
33
34 // 恢复视频的样式
35 video.style.position = '';
36 video.style.top = '';
37 video.style.left = '';
38 video.style.width = '';
39 video.style.height = '';
40 video.style.zIndex = '';
41 video.style.backgroundColor = '';
42
43 // 恢复滚动条
44 document.documentElement.style.overflow = '';
45}
46
47// 监听页面上所有的 <video> 元素
48function setupVideoListeners() {
49 const videos = document.querySelectorAll('video');
50 console.log(`Found ${videos.length} video(s) on the page.`);
51
52 videos.forEach(video => {
53 video.addEventListener('play', () => {
54 console.log('Video started playing, making it full window.');
55 makeVideoFullWindow(video);
56
57 // 当视频暂停或结束时,恢复原始状态
58 video.addEventListener('pause', () => resetVideo(video), { once: true });
59 video.addEventListener('ended', () => resetVideo(video), { once: true });
60 });
61 });
62}
63
64// 页面加载时,设置视频监听器
65document.addEventListener('DOMContentLoaded', () => {
66 console.log('DOM fully loaded and parsed, setting up video listeners.');
67 setupVideoListeners();
68});
69
70// 动态加载的视频元素也需要监听,观察DOM变化
71const observer = new MutationObserver(() => {
72 console.log('DOM mutations detected, checking for new videos.');
73 setupVideoListeners();
74});
75
76observer.observe(document.body, { childList: true, subtree: true });
77