Last active 1730290493

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

anduin's Avatar anduin revised this gist 1730290493. Go to revision

1 file changed, 2 insertions, 2 deletions

content.js

@@ -82,10 +82,10 @@ document.addEventListener("keydown", (event) => {
82 82
83 83 if (currentChannelIndex === -1) return; // Exit if no active channel found
84 84
85 - if (event.key === "[") {
85 + if (event.key === "ArrowLeft") {
86 86 // Go to the previous channel
87 87 currentChannelIndex = (currentChannelIndex - 1 + channelLinks.length) % channelLinks.length;
88 - } else if (event.key === "]") {
88 + } else if (event.key === "ArrowRight") {
89 89 // Go to the next channel
90 90 currentChannelIndex = (currentChannelIndex + 1) % channelLinks.length;
91 91 } else {

anduin's Avatar anduin revised this gist 1730244954. Go to revision

No changes

anduin's Avatar anduin revised this gist 1730244914. Go to revision

1 file changed, 25 insertions

content.js

@@ -74,3 +74,28 @@ const observer = new MutationObserver(() => {
74 74 });
75 75
76 76 observer.observe(document.body, { childList: true, subtree: true });
77 +
78 + // 换台模块
79 + document.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 === "[") {
86 + // Go to the previous channel
87 + currentChannelIndex = (currentChannelIndex - 1 + channelLinks.length) % channelLinks.length;
88 + } else if (event.key === "]") {
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 +

anduin's Avatar anduin revised this gist 1729789516. Go to revision

1 file changed, 16 insertions

manifest.json(file created)

@@ -0,0 +1,16 @@
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 + }

anduin's Avatar anduin revised this gist 1729616793. Go to revision

No changes

anduin's Avatar anduin revised this gist 1729616494. Go to revision

1 file changed, 76 insertions

content.js(file created)

@@ -0,0 +1,76 @@
1 + // 函数:将视频元素设置为覆盖整个窗口
2 + function 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 +
17 + document.querySelectorAll('.nav_wrapper_bg.newtopbz').forEach(element => {
18 + element.remove();
19 + })
20 + document.querySelectorAll('.header_nav.newtopbzTV').forEach(element => {
21 + element.remove();
22 + })
23 + document.querySelectorAll('.phone').forEach(element => {
24 + element.remove();
25 + })
26 +
27 + console.log('Video is now fullscreen-like.');
28 + }
29 +
30 + // 函数:恢复视频原始状态
31 + function 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> 元素
48 + function 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 + // 页面加载时,设置视频监听器
65 + document.addEventListener('DOMContentLoaded', () => {
66 + console.log('DOM fully loaded and parsed, setting up video listeners.');
67 + setupVideoListeners();
68 + });
69 +
70 + // 动态加载的视频元素也需要监听,观察DOM变化
71 + const observer = new MutationObserver(() => {
72 + console.log('DOM mutations detected, checking for new videos.');
73 + setupVideoListeners();
74 + });
75 +
76 + observer.observe(document.body, { childList: true, subtree: true });
Newer Older