content.js
                        
                             · 2.3 KiB · JavaScript
                        
                    
                    
                      
                        原始文件
                      
                    
                      
                    
                        
                          
                        
                    
                    
                
                
                
            // 函数:将视频元素设置为覆盖整个窗口
function makeVideoFullWindow(video) {
  console.log('Making video full window.');
  
  // 设置视频的样式,使其占据整个页面
  video.style.position = 'fixed';
  video.style.top = '0';
  video.style.left = '0';
  video.style.width = '100vw';
  video.style.height = '100vh';
  video.style.zIndex = '9999'; // 保证视频位于所有元素上方
  video.style.backgroundColor = 'black'; // 确保背景为黑色,避免干扰
  // 隐藏滚动条
  document.documentElement.style.overflow = 'hidden';
document.querySelectorAll('.nav_wrapper_bg.newtopbz').forEach(element => {
  element.remove();
})
document.querySelectorAll('.header_nav.newtopbzTV').forEach(element => {
  element.remove();
})
document.querySelectorAll('.phone').forEach(element => {
  element.remove();
})
  console.log('Video is now fullscreen-like.');
}
// 函数:恢复视频原始状态
function resetVideo(video) {
  console.log('Resetting video to original state.');
  // 恢复视频的样式
  video.style.position = '';
  video.style.top = '';
  video.style.left = '';
  video.style.width = '';
  video.style.height = '';
  video.style.zIndex = '';
  video.style.backgroundColor = '';
  // 恢复滚动条
  document.documentElement.style.overflow = '';
}
// 监听页面上所有的 <video> 元素
function setupVideoListeners() {
  const videos = document.querySelectorAll('video');
  console.log(`Found ${videos.length} video(s) on the page.`);
  
  videos.forEach(video => {
    video.addEventListener('play', () => {
      console.log('Video started playing, making it full window.');
      makeVideoFullWindow(video);
      // 当视频暂停或结束时,恢复原始状态
      video.addEventListener('pause', () => resetVideo(video), { once: true });
      video.addEventListener('ended', () => resetVideo(video), { once: true });
    });
  });
}
// 页面加载时,设置视频监听器
document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM fully loaded and parsed, setting up video listeners.');
  setupVideoListeners();
});
// 动态加载的视频元素也需要监听,观察DOM变化
const observer = new MutationObserver(() => {
  console.log('DOM mutations detected, checking for new videos.');
  setupVideoListeners();
});
observer.observe(document.body, { childList: true, subtree: true });
                | 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 }); | 
| 77 |