Last active 1730290493

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

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
78// 换台模块
79document.addEventListener("keydown", (event) => {
80 const channelLinks = Array.from(document.querySelectorAll("dl > dt > a"));
81 let currentChannelIndex = channelLinks.findIndex(link => link.parentElement.parentElement.classList.contains("active"));
82
83 if (currentChannelIndex === -1) return; // Exit if no active channel found
84
85 if (event.key === "ArrowLeft") {
86 // Go to the previous channel
87 currentChannelIndex = (currentChannelIndex - 1 + channelLinks.length) % channelLinks.length;
88 } else if (event.key === "ArrowRight") {
89 // Go to the next channel
90 currentChannelIndex = (currentChannelIndex + 1) % channelLinks.length;
91 } else {
92 return; // Ignore other keys
93 }
94
95 // Set the active class on the new channel and redirect to its link
96 document.querySelector(".active")?.classList.remove("active");
97 const newChannel = channelLinks[currentChannelIndex];
98 newChannel.parentElement.parentElement.classList.add("active");
99 window.location.href = newChannel.href; // Redirect to the new channel
100});
101
102
manifest.json Raw
1{
2 "manifest_version": 3,
3 "name": "Video Auto Fullscreen",
4 "version": "1.0",
5 "description": "Automatically fullscreen videos when they start playing.",
6 "permissions": [
7 "activeTab",
8 "scripting"
9 ],
10 "content_scripts": [
11 {
12 "matches": ["https://tv.cctv.com/*"],
13 "js": ["content.js"]
14 }
15 ]
16}
17