文章
文章用户快讯圈子网址导航问答

一个隐藏视频的小玩意

GitHub：内容被隐藏
CNB：内容被隐藏
演示：内容被隐藏

测试的文件：一个隐藏视频的小玩意

原理是选择通过 copy /b 命令合并的图片+视频文件
过于简单，就不写使用过程了。
点击头像可以更换图片，可以拖拽视频到里面也可以点击上传！

一个隐藏视频的小玩意

  1. <!DOCTYPE html>
  2. <html lang=”zh-CN”>
  3. <head>
  4.     <meta charset=”UTF-8″>
  5.     <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  6.     <title>Copy /B</title>
  7.     <style>
  8.         body {
  9.             font-family: “Microsoft YaHei”, sans-serif;
  10.             max-width: 900px;
  11.             margin: 0 auto;
  12.             padding: 20px;
  13.             text-align: center;
  14.             background-color: #f5f5f5;
  15.         }
  16.         .container {
  17.         }
  18.         .tab-container {
  19.             display: flex;
  20.             margin-bottom: 20px;
  21.         }
  22.         .tab {
  23.             padding: 10px 20px;
  24.             cursor: pointer;
  25.             background-color: #e0e0e0;
  26.             border-radius: 5px;
  27.             margin-right: 5px;
  28.         }
  29.         .tab.active {
  30.             background-color: #4CAF50;
  31.             color: white;
  32.         }
  33.         .tab-content {
  34.             display: none;
  35.             padding: 20px;
  36.             border: 1px solid #ddd;
  37.             border-radius: 0 0 5px 5px;
  38.             background-color: white;
  39.         }
  40.         .tab-content.active {
  41.             display: block;
  42.             border: 2px dashed #ccc;
  43.             border-radius: 8px;
  44.         }
  45.         .media-preview {
  46.             max-width: 100%;
  47.             max-height: 300px;
  48.             margin: 15px auto;
  49.             border: 1px solid #ddd;
  50.             border-radius: 5px;
  51.             display: block;
  52.         }
  53.         .video-container {
  54.             position: relative;
  55.             width: 100%;
  56.             max-width: 800px;
  57.             margin: 15px auto;
  58.             background-color: #000;
  59.             border-radius: 5px;
  60.             overflow: hidden;
  61.             display: none;
  62.         }
  63.         .video-container video {
  64.             width: 100%;
  65.             height: auto;
  66.             max-height: 500px;
  67.             display: block;
  68.         }
  69.         .file-input-label, .btn {
  70.             display: inline-flex;
  71.             align-items: center;
  72.             justify-content: center;
  73.             padding: 10px 20px;
  74.             min-width: 160px;
  75.             box-sizing: border-box;
  76.             white-space: nowrap;
  77.             background-color: #4CAF50;
  78.             color: white;
  79.             border-radius: 4px;
  80.             cursor: pointer;
  81.             margin: 10px;
  82.             text-align: center;
  83.             border: none;
  84.             transition: background-color 0.3s;
  85.         }
  86.         .file-input-label:hover, .btn:hover {
  87.             background-color: #45a049;
  88.         }
  89.         .btn-secondary {
  90.             background-color: #2196F3;
  91.         }
  92.         .btn-secondary:hover {
  93.             background-color: #0b7dda;
  94.         }
  95.         .btn-danger {
  96.             background-color: #f44336;
  97.         }
  98.         .btn-danger:hover {
  99.             background-color: #da190b;
  100.         }
  101.         #status {
  102.             margin: 15px 0;
  103.             min-height: 20px;
  104.             color: #666;
  105.         }
  106.         .progress-container {
  107.             width: 100%;
  108.             background-color: #f1f1f1;
  109.             border-radius: 5px;
  110.             margin: 10px 0;
  111.             display: none;
  112.         }
  113.         .progress-bar {
  114.             height: 20px;
  115.             border-radius: 5px;
  116.             background-color: #4CAF50;
  117.             width: 0%;
  118.             transition: width 0.3s;
  119.         }
  120.         input[type=”text”] {
  121.             padding: 10px;
  122.             width: 80%;
  123.             margin: 10px 0;
  124.             border: 1px solid #ddd;
  125.             border-radius: 4px;
  126.         }
  127.         .hidden {
  128.             display: none;
  129.         }
  130.         .controls {
  131.             margin-top: 20px;
  132.         }
  133.         [url=home.php?mod=space&uid=945662]@media[/url] (max-width: 600px) {
  134.             .tab-container {
  135.                 flex-direction: column;
  136.             }
  137.             .tab {
  138.                 margin-right: 0;
  139.                 margin-bottom: 5px;
  140.                 border-radius: 5px;
  141.             }
  142.             input[type=”text”] {
  143.                 width: 95%;
  144.             }
  145.             .video-container {
  146.                 max-height: 300px;
  147.             }
  148.         }
  150.         #generate .file-input-label,
  151.         #generate #generateBtn {
  152.             width: 150px !important;        
  153.             min-width: 150px !important;   
  154.             height: 40px !important;         
  155.             padding: 0 !important;         
  156.             margin: 10px !important;         
  157.             display: inline-flex !important;
  158.             align-items: center !important;
  159.             justify-content: center !important;
  160.             box-sizing: border-box !important;
  161.             line-height: 44px !important;   
  162.             font-size: 16px !important;
  163.             white-space: nowrap !important;
  164.             vertical-align: middle !important;
  165.         }
  166.         /* 拖拽高亮样式（作用于整个面板区域） */
  167.         .tab-content.drag-accept { position: relative; }
  168.         .tab-content.drag-accept.dragover {
  169.             border-color: #4CAF50 !important;
  170.             box-shadow: 0 0 0 2px #4CAF50 inset;
  171.             background: #f0fff4;
  172.         }
  173.     </style>
  174.     <script src=”https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js”></script>
  175.     <script src=”https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js”></script>
  176. </head>
  177. <body>
  179.     <script>
  180.     document.body.innerHTML = ”;
  182.     // Create container
  183.     const container = document.createElement(‘div’);
  184.     container.className = ‘container’;
  185.     document.body.appendChild(container);
  187.     // Create heading
  188.     //const h1 = document.createElement(‘h1’);
  189.     //h1.textContent = ‘内容被隐藏播放器’;
  190.     //container.appendChild(h1);
  192.     // Create tab container
  193.     const tabContainer = document.createElement(‘div’);
  194.     tabContainer.className = ‘tab-container’;
  195.     container.appendChild(tabContainer);
  197.     // Create tabs
  198.     const tabs = [
  199.       { text: ‘文件生成’, tab: ‘generate’, active: true },
  200.       { text: ‘本地文件’, tab: ‘local’, active: false },
  201.       { text: ‘URL转换’, tab: ‘url’, active: false }
  202.     ];
  204.     tabs.forEach(tabData => {
  205.       const tab = document.createElement(‘div’);
  206.       tab.className = `tab ${tabData.active ? ‘active’ : ”}`;
  207.       tab.textContent = tabData.text;
  208.       tab.setAttribute(‘data-tab’, tabData.tab);
  209.       tabContainer.appendChild(tab);
  210.     });
  212.     // Create tab contents
  213.     const tabContents = [
  214.       {
  215.         id: ‘local’,
  216.         active: false,
  217.         title: ‘本地文件提取’,
  218.         description: ‘选择通过 copy /b 命令合并的图片+视频文件’,
  219.         content: `
  220.           <label for=”localFile” id=”localChooseLabel” class=”file-input-label”>选择本地文件</label>
  221.           <input type=”file” id=”localFile” accept=”.jpg,.jpeg,.png” class=”hidden”>
  222.            
  223.           <div id=”localStatus” class=”status”>等待选择文件…</div>
  224.           <div class=”progress-container” id=”localProgressContainer”>
  225.             <div id=”localProgress” class=”progress-bar”></div>
  226.           </div>
  227.            
  228.           <img id=”localPreview” class=”media-preview hidden”>
  229.           <div class=”video-container” id=”localVideoContainer”>
  230.             <video controls id=”localVideoPlayer”></video>
  231.           </div>
  232.            
  233.           <div class=”controls”>
  234.             <button id=”localDownloadBtn” class=”btn btn-secondary hidden”>下载视频</button>
  235.           </div>
  236.         `
  237.       },
  238.       {
  239.         id: ‘url’,
  240.         active: false,
  241.         title: ‘URL转换工具’,
  242.         description: ‘输入图片URL，提取内容被隐藏‘,
  243.         content: `
  244.           <input type=”text” id=”imageUrl” placeholder=”输入图片URL (如: [img]https://example.com/image.jpg[/img])”>
  245.            
  246.           <button id=”fetchUrlBtn” class=”btn”>提取视频</button>
  247.            
  248.           <div id=”urlStatus” class=”status”>等待输入URL…</div>
  249.           <div class=”progress-container” id=”urlProgressContainer”>
  250.             <div id=”urlProgress” class=”progress-bar”></div>
  251.           </div>
  252.            
  253.           <img id=”urlPreview” class=”media-preview hidden”>
  254.           <div class=”video-container” id=”urlVideoContainer”>
  255.             <video controls id=”urlVideoPlayer”></video>
  256.           </div>
  257.            
  258.           <div class=”controls”>
  259.             <button id=”urlDownloadBtn” class=”btn btn-secondary hidden”>下载视频</button>
  260.           </div>
  261.         `
  262.       },
  263.       {
  264.         id: ‘generate’,
  265.         active: true,
  266.         title: ‘文件生成工具’,
  267.         description: ‘选择视频文件，生成合并的图片文件’,
  268.         content: `
  269.           <div>
  270.             <img id=”defaultPreview” src=”./img/iii.jpg” class=”media-preview” title=”点击更换图片”>
  271.           </div>
  272.           <!– 隐藏的封面图片选择器 –>
  273.           <input type=”file” id=”coverImageFile” accept=”image/*” class=”hidden”>
  274.            
  275.           <label for=”videoFile” class=”file-input-label”>选择视频文件</label>
  276.           <input type=”file” id=”videoFile” accept=”video/*” class=”hidden”>
  277.            
  278.           <button id=”generateBtn” class=”btn”>生成合并图片</button>
  279.            
  280.           <div id=”generateStatus” class=”status”>等待选择视频文件…</div>
  281.           <div class=”progress-container” id=”generateProgressContainer”>
  282.             <div id=”generateProgress” class=”progress-bar”></div>
  283.           </div>
  284.            
  285.           <div class=”controls”>
  286.             <button id=”generateDownloadBtn” class=”btn btn-secondary hidden”>下载合并图片</button>
  287.           </div>
  288.         `
  289.       }
  290.     ];
  292.     tabContents.forEach(contentData => {
  293.       const content = document.createElement(‘div’);
  294.       content.id = contentData.id;
  295.       content.className = `tab-content ${contentData.active ? ‘active’ : ”}`;
  296.       
  297.       const h2 = document.createElement(‘h2’);
  298.       h2.textContent = contentData.title;
  299.       if (contentData.id === ‘local’) h2.id = ‘localTitle’;
  300.       if (contentData.id === ‘url’)   h2.id = ‘urlTitle’;
  301.       content.appendChild(h2);
  302.       
  303.       const p = document.createElement(‘p’);
  304.       p.textContent = contentData.description;
  305.       if (contentData.id === ‘local’) p.id = ‘localDesc’;
  306.       if (contentData.id === ‘url’)   p.id = ‘urlDesc’;
  307.       content.appendChild(p);
  308.       
  309.       content.innerHTML += contentData.content;
  310.       container.appendChild(content);
  311.     });
  313.     // Add tab switching functionality
  314.     const tabsElements = document.querySelectorAll(‘.tab’);
  315.     tabsElements.forEach(tab => {
  316.       tab.addEventListener(‘click’, () => {
  317.         // Remove active class from all tabs and contents
  318.         document.querySelectorAll(‘.tab’).forEach(t => t.classList.remove(‘active’));
  319.         document.querySelectorAll(‘.tab-content’).forEach(c => c.classList.remove(‘active’));
  320.          
  321.         // Add active class to clicked tab and corresponding content
  322.         tab.classList.add(‘active’);
  323.         const tabId = tab.getAttribute(‘data-tab’);
  324.         document.getElementById(tabId).classList.add(‘active’);
  325.       });
  326.     });
  327.         // 全局变量
  328.         let currentVideoBlob = null;
  329.         let currentGeneratedBlob = null;
  330.         let droppedVideoFile = null; // 拖拽到“文件生成工具”的视频文件
  331.         let customCoverImageBlob = null; // 用户自选的封面图片
  332.          
  333.         // 切换选项卡
  334.         document.querySelectorAll(‘.tab’).forEach(tab => {
  335.             tab.addEventListener(‘click’, () => {
  336.                 document.querySelectorAll(‘.tab’).forEach(t => t.classList.remove(‘active’));
  337.                 document.querySelectorAll(‘.tab-content’).forEach(c => c.classList.remove(‘active’));
  338.                  
  339.                 tab.classList.add(‘active’);
  340.                 document.getElementById(tab.dataset.tab).classList.add(‘active’);
  341.             });
  342.         });
  343.          
  344.         // 本地文件处理
  345.         document.getElementById(‘localFile’).addEventListener(‘change’, async function(e) {
  346.             const file = e.target.files[0];
  347.             if (!file) return;
  348.             
  349.             const statusEl = document.getElementById(‘localStatus’);
  350.             const progressContainer = document.getElementById(‘localProgressContainer’);
  351.             const progressEl = document.getElementById(‘localProgress’);
  352.             const videoContainer = document.getElementById(‘localVideoContainer’);
  353.             const videoPlayer = document.getElementById(‘localVideoPlayer’);
  354.             const previewImg = document.getElementById(‘localPreview’);
  355.             const downloadBtn = document.getElementById(‘localDownloadBtn’);
  356.             
  357.             // 重置状态
  358.             statusEl.textContent = “正在处理文件…”;
  359.             progressContainer.style.display = ‘block’;
  360.             progressEl.style.width = ‘0%’;
  361.             videoContainer.style.display = ‘none’;
  362.             downloadBtn.classList.add(‘hidden’);
  363.             currentVideoBlob = null;
  364.             
  365.             try {
  366.                 // 显示预览图片
  367.                 previewImg.src = URL.createObjectURL(file);
  368.                 previewImg.classList.remove(‘hidden’);
  369.                  
  370.                 // 1. 读取文件内容
  371.                 const arrayBuffer = await file.arrayBuffer();
  372.                 progressEl.style.width = ‘20%’;
  373.                  
  374.                 // 2. 查找ZIP文件起始位置
  375.                 statusEl.textContent = “正在查找隐藏内容…”;
  376.                 const uint8Array = new Uint8Array(arrayBuffer);
  377.                 let zipStart = -1;
  378.                  
  379.                 // 查找ZIP文件头 (PK\x03\x04)
  380.                 for (let i = 0; i < uint8Array.length – 4; i++) {
  381.                     if (uint8Array[i] === 0x50 && uint8Array[i+1] === 0x4B &&
  382.                         uint8Array[i+2] === 0x03 && uint8Array[i+3] === 0x04) {
  383.                         zipStart = i;
  384.                         break;
  385.                     }
  386.                 }
  387.                  
  388.                 if (zipStart === -1) throw new Error(“未检测到隐藏内容”);
  389.                 progressEl.style.width = ‘40%’;
  390.                  
  391.                 // 3. 提取ZIP部分
  392.                 statusEl.textContent = “正在提取隐藏数据…”;
  393.                 const zipData = arrayBuffer.slice(zipStart);
  394.                 progressEl.style.width = ‘60%’;
  395.                  
  396.                 // 4. 使用JSZip解析ZIP
  397.                 statusEl.textContent = “正在解析内容…”;
  398.                 const zip = await JSZip.loadAsync(zipData);
  399.                 progressEl.style.width = ‘80%’;
  400.                  
  401.                 // 5. 查找视频文件
  402.                 statusEl.textContent = “正在查找视频文件…”;
  403.                 let videoFile = null;
  404.                 const videoExtensions = [‘.mp4’, ‘.webm’, ‘.ogg’, ‘.mov’, ‘.avi’, ‘.mkv’];
  405.                  
  406.                 for (const [name, file] of Object.entries(zip.files)) {
  407.                     if (!file.dir && videoExtensions.some(ext => name.toLowerCase().endsWith(ext))) {
  408.                         videoFile = file;
  409.                         break;
  410.                     }
  411.                 }
  412.                  
  413.                 if (!videoFile) throw new Error(“未找到支持的视频文件”);
  414.                  
  415.                 // 6. 提取视频内容
  416.                 statusEl.textContent = “正在提取视频…”;
  417.                 const videoData = await videoFile.async(‘blob’);
  418.                 currentVideoBlob = videoData;
  419.                 progressEl.style.width = ‘100%’;
  420.                  
  421.                 // 7. 播放视频
  422.                 videoPlayer.src = URL.createObjectURL(videoData);
  423.                 videoContainer.style.display = ‘block’;
  424.                 downloadBtn.classList.remove(‘hidden’);
  425.                  
  426.                 statusEl.textContent = `已加载: ${videoFile.name}`;
  427.                  
  428.                 // 成功后：隐藏标题、描述、选择按钮与预览图，仅保留文件名与视频
  429.                 const lt = document.getElementById(‘localTitle’);
  430.                 const ld = document.getElementById(‘localDesc’);
  431.                 const ll = document.getElementById(‘localChooseLabel’);
  432.                 if (lt) lt.style.display = ‘none’;
  433.                 if (ld) ld.style.display = ‘none’;
  434.                 if (ll) ll.style.display = ‘none’;
  435.                 previewImg.classList.add(‘hidden’);
  437.                 // 自动播放
  438.                 videoPlayer.play().catch(e => {
  439.                     statusEl.textContent += ” (点击播放按钮开始播放)”;
  440.                 });
  441.                  
  442.             } catch (error) {
  443.                 console.error(“处理失败:”, error);
  444.                 statusEl.textContent = `错误: ${error.message}`;
  445.                 progressEl.style.width = ‘0%’;
  446.                 videoContainer.style.display = ‘none’;
  447.             } finally {
  448.                 setTimeout(() => {
  449.                     progressContainer.style.display = ‘none’;
  450.                 }, 500);
  451.             }
  452.         });
  453.          
  454.         // 本地图片拖拽上传（整个面板区域可拖拽）
  455.         (function() {
  456.             const dropEl = document.getElementById(‘local’);
  457.             if (!dropEl) return;
  458.             dropEl.classList.add(‘drag-accept’);
  459.             const isImage = (file) => {
  460.                 const name = (file.name || ”).toLowerCase();
  461.                 return file.type.startsWith(‘image/’) || name.endsWith(‘.jpg’) || name.endsWith(‘.jpeg’) || name.endsWith(‘.png’);
  462.             };
  463.             const prevent = (e) => { e.preventDefault(); e.stopPropagation(); };
  465.             [‘dragenter’,’dragover’].forEach(ev => {
  466.                 dropEl.addEventListener(ev, (e) => { prevent(e); dropEl.classList.add(‘dragover’); });
  467.             });
  468.             [‘dragleave’,’drop’].forEach(ev => {
  469.                 dropEl.addEventListener(ev, (e) => { prevent(e); dropEl.classList.remove(‘dragover’); });
  470.             });
  472.             dropEl.addEventListener(‘drop’, async (e) => {
  473.                 const file = e.dataTransfer?.files?.[0];
  474.                 if (!file) return;
  475.                 if (!isImage(file)) {
  476.                     alert(‘请拖入 JPG/PNG 图片文件’);
  477.                     return;
  478.                 }
  480.                 const statusEl = document.getElementById(‘localStatus’);
  481.                 const progressContainer = document.getElementById(‘localProgressContainer’);
  482.                 const progressEl = document.getElementById(‘localProgress’);
  483.                 const videoContainer = document.getElementById(‘localVideoContainer’);
  484.                 const videoPlayer = document.getElementById(‘localVideoPlayer’);
  485.                 const previewImg = document.getElementById(‘localPreview’);
  486.                 const downloadBtn = document.getElementById(‘localDownloadBtn’);
  487.                 currentVideoBlob = null;
  489.                 try {
  490.                     statusEl.textContent = “正在处理文件…”;
  491.                     progressContainer.style.display = ‘block’;
  492.                     progressEl.style.width = ‘0%’;
  493.                     videoContainer.style.display = ‘none’;
  494.                     downloadBtn.classList.add(‘hidden’);
  496.                     // 预览图片
  497.                     previewImg.src = URL.createObjectURL(file);
  498.                     previewImg.classList.remove(‘hidden’);
  500.                     // 读取内容
  501.                     const arrayBuffer = await file.arrayBuffer();
  502.                     progressEl.style.width = ‘20%’;
  504.                     // 查找 ZIP 头
  505.                     statusEl.textContent = “正在查找隐藏内容…”;
  506.                     const uint8Array = new Uint8Array(arrayBuffer);
  507.                     let zipStart = -1;
  508.                     for (let i = 0; i < uint8Array.length – 4; i++) {
  509.                         if (uint8Array[i] === 0x50 && uint8Array[i+1] === 0x4B && uint8Array[i+2] === 0x03 && uint8Array[i+3] === 0x04) {
  510.                             zipStart = i;
  511.                             break;
  512.                         }
  513.                     }
  514.                     if (zipStart === -1) throw new Error(“未检测到隐藏内容”);
  515.                     progressEl.style.width = ‘40%’;
  517.                     // 提取/解析 ZIP
  518.                     statusEl.textContent = “正在提取隐藏数据…”;
  519.                     const zipData = arrayBuffer.slice(zipStart);
  520.                     progressEl.style.width = ‘60%’;
  521.                     statusEl.textContent = “正在解析内容…”;
  522.                     const zip = await JSZip.loadAsync(zipData);
  523.                     progressEl.style.width = ‘80%’;
  525.                     // 查找视频
  526.                     statusEl.textContent = “正在查找视频文件…”;
  527.                     let videoFile = null;
  528.                     const videoExtensions = [‘.mp4’, ‘.webm’, ‘.ogg’, ‘.mov’, ‘.avi’, ‘.mkv’];
  529.                     for (const [name, zf] of Object.entries(zip.files)) {
  530.                         if (!zf.dir && videoExtensions.some(ext => name.toLowerCase().endsWith(ext))) {
  531.                             videoFile = zf;
  532.                             break;
  533.                         }
  534.                     }
  535.                     if (!videoFile) throw new Error(“未找到支持的视频文件”);
  537.                     // 提取视频
  538.                     statusEl.textContent = “正在提取视频…”;
  539.                     const videoData = await videoFile.async(‘blob’);
  540.                     currentVideoBlob = videoData;
  541.                     progressEl.style.width = ‘100%’;
  543.                     // 播放展示
  544.                     videoPlayer.src = URL.createObjectURL(videoData);
  545.                     videoContainer.style.display = ‘block’;
  546.                     downloadBtn.classList.remove(‘hidden’);
  547.                     statusEl.textContent = `已加载: ${videoFile.name}`;
  549.                     // 成功后：隐藏标题、描述、选择按钮与预览图，仅保留文件名与视频
  550.                     const lt = document.getElementById(‘localTitle’);
  551.                     const ld = document.getElementById(‘localDesc’);
  552.                     const ll = document.getElementById(‘localChooseLabel’);
  553.                     if (lt) lt.style.display = ‘none’;
  554.                     if (ld) ld.style.display = ‘none’;
  555.                     if (ll) ll.style.display = ‘none’;
  556.                     previewImg.classList.add(‘hidden’);
  558.                     videoPlayer.play().catch(() => {
  559.                         statusEl.textContent += ” (点击播放按钮开始播放)”;
  560.                     });
  561.                 } catch (err) {
  562.                     console.error(‘拖拽处理失败:’, err);
  563.                     statusEl.textContent = `错误: ${err.message}`;
  564.                     progressEl.style.width = ‘0%’;
  565.                     videoContainer.style.display = ‘none’;
  566.                 } finally {
  567.                     setTimeout(() => { progressContainer.style.display = ‘none’; }, 500);
  568.                 }
  569.             });
  570.         })();
  572.         // 本地文件下载
  573.         document.getElementById(‘localDownloadBtn’).addEventListener(‘click’, function() {
  574.             if (currentVideoBlob) {
  575.                 saveAs(currentVideoBlob, ‘extracted_video.mp4’);
  576.             }
  577.         });
  578.          
  579.         // URL转换处理
  580.         document.getElementById(‘fetchUrlBtn’).addEventListener(‘click’, async function() {
  581.             const imageUrl = document.getElementById(‘imageUrl’).value.trim();
  582.             
  583.             if (!imageUrl) {
  584.                 alert(“请输入图片URL”);
  585.                 return;
  586.             }
  587.             
  588.             const statusEl = document.getElementById(‘urlStatus’);
  589.             const progressContainer = document.getElementById(‘urlProgressContainer’);
  590.             const progressEl = document.getElementById(‘urlProgress’);
  591.             const videoContainer = document.getElementById(‘urlVideoContainer’);
  592.             const videoPlayer = document.getElementById(‘urlVideoPlayer’);
  593.             const previewImg = document.getElementById(‘urlPreview’);
  594.             const downloadBtn = document.getElementById(‘urlDownloadBtn’);
  595.             
  596.             // 重置状态
  597.             statusEl.textContent = “正在获取图片…”;
  598.             progressContainer.style.display = ‘block’;
  599.             progressEl.style.width = ‘0%’;
  600.             videoContainer.style.display = ‘none’;
  601.             downloadBtn.classList.add(‘hidden’);
  602.             currentVideoBlob = null;
  603.             
  604.             try {
  605.                 // 显示预览图片
  606.                 previewImg.src = imageUrl;
  607.                 previewImg.classList.remove(‘hidden’);
  608.                  
  609.                 // 1. 获取图片
  610.                 const response = await fetch(imageUrl);
  611.                 if (!response.ok) throw new Error(`获取图片失败: ${response.status}`);
  612.                  
  613.                 progressEl.style.width = ‘20%’;
  614.                  
  615.                 // 2. 读取图片内容
  616.                 const arrayBuffer = await response.arrayBuffer();
  617.                 progressEl.style.width = ‘40%’;
  618.                  
  619.                 // 3. 查找ZIP文件起始位置
  620.                 statusEl.textContent = “正在查找隐藏内容…”;
  621.                 const uint8Array = new Uint8Array(arrayBuffer);
  622.                 let zipStart = -1;
  623.                  
  624.                 for (let i = 0; i < uint8Array.length – 4; i++) {
  625.                     if (uint8Array[i] === 0x50 && uint8Array[i+1] === 0x4B &&
  626.                         uint8Array[i+2] === 0x03 && uint8Array[i+3] === 0x04) {
  627.                         zipStart = i;
  628.                         break;
  629.                     }
  630.                 }
  631.                  
  632.                 if (zipStart === -1) throw new Error(“未检测到隐藏内容”);
  633.                 progressEl.style.width = ‘60%’;
  634.                  
  635.                 // 4. 提取ZIP部分
  636.                 statusEl.textContent = “正在提取隐藏数据…”;
  637.                 const zipData = arrayBuffer.slice(zipStart);
  638.                 progressEl.style.width = ‘80%’;
  639.                  
  640.                 // 5. 使用JSZip解析ZIP
  641.                 statusEl.textContent = “正在解析内容…”;
  642.                 const zip = await JSZip.loadAsync(zipData);
  643.                  
  644.                 // 6. 查找视频文件
  645.                 statusEl.textContent = “正在查找视频文件…”;
  646.                 let videoFile = null;
  647.                 const videoExtensions = [‘.mp4’, ‘.webm’, ‘.ogg’, ‘.mov’, ‘.avi’, ‘.mkv’];
  648.                  
  649.                 for (const [name, file] of Object.entries(zip.files)) {
  650.                     if (!file.dir && videoExtensions.some(ext => name.toLowerCase().endsWith(ext))) {
  651.                         videoFile = file;
  652.                         break;
  653.                     }
  654.                 }
  655.                  
  656.                 if (!videoFile) throw new Error(“未找到支持的视频文件”);
  657.                  
  658.                 // 7. 提取视频内容
  659.                 statusEl.textContent = “正在提取视频…”;
  660.                 const videoData = await videoFile.async(‘blob’);
  661.                 currentVideoBlob = videoData;
  662.                 progressEl.style.width = ‘100%’;
  663.                  
  664.                 // 8. 播放视频
  665.                 videoPlayer.src = URL.createObjectURL(videoData);
  666.                 videoContainer.style.display = ‘block’;
  667.                  
  668.                 statusEl.textContent = `已加载: ${videoFile.name}`;
  669.                  
  670.                 // 成功后：仅保留文件名与视频，隐藏其它控件
  671.                 const ut = document.getElementById(‘urlTitle’);
  672.                 const ud = document.getElementById(‘urlDesc’);
  673.                 const urlInput = document.getElementById(‘imageUrl’);
  674.                 const fetchBtn = document.getElementById(‘fetchUrlBtn’);
  675.                 const urlPrev = document.getElementById(‘urlPreview’);
  676.                 const urlDl  = document.getElementById(‘urlDownloadBtn’);
  677.                 if (ut) ut.style.display = ‘none’;
  678.                 if (ud) ud.style.display = ‘none’;
  679.                 if (urlInput) urlInput.style.display = ‘none’;
  680.                 if (fetchBtn) fetchBtn.style.display = ‘none’;
  681.                 if (urlPrev) urlPrev.classList.add(‘hidden’);
  682.                 if (urlDl) urlDl.classList.add(‘hidden’);
  684.                 // 自动播放
  685.                 videoPlayer.play().catch(e => {
  686.                     statusEl.textContent += ” (点击播放按钮开始播放)”;
  687.                 });
  688.                  
  689.             } catch (error) {
  690.                 console.error(“处理失败:”, error);
  691.                 statusEl.textContent = `错误: ${error.message}`;
  692.                 progressEl.style.width = ‘0%’;
  693.                 videoContainer.style.display = ‘none’;
  694.             } finally {
  695.                 setTimeout(() => {
  696.                     progressContainer.style.display = ‘none’;
  697.                 }, 500);
  698.             }
  699.         });
  700.          
  701.         // URL文件下载
  702.         document.getElementById(‘urlDownloadBtn’).addEventListener(‘click’, function() {
  703.             if (currentVideoBlob) {
  704.                 saveAs(currentVideoBlob, ‘extracted_video.mp4’);
  705.             }
  706.         });
  707.          
  708.         // 点击生成面板图片以更换封面
  709.         (function() {
  710.             const previewImg = document.getElementById(‘defaultPreview’);
  711.             const coverInput = document.getElementById(‘coverImageFile’);
  712.             if (!previewImg || !coverInput) return;
  714.             previewImg.style.cursor = ‘pointer’;
  715.             previewImg.addEventListener(‘click’, () => {
  716.                 // 提示并打开文件选择
  717.                 coverInput.click();
  718.             });
  720.             coverInput.addEventListener(‘change’, async () => {
  721.                 const file = coverInput.files && coverInput.files[0];
  722.                 if (!file) return;
  723.                 // 保存自定义封面并更新预览
  724.                 customCoverImageBlob = file;
  725.                 try {
  726.                     const objectUrl = URL.createObjectURL(file);
  727.                     previewImg.src = objectUrl;
  728.                     const statusEl = document.getElementById(‘generateStatus’);
  729.                     if (statusEl) statusEl.textContent = `已选择封面图片：${file.name}`;
  730.                 } catch (_) {}
  731.             });
  732.         })();
  734.         // “文件生成工具”拖拽上传（整个面板区域可拖拽）
  735.         (function() {
  736.             const dropEl = document.getElementById(‘generate’);
  737.             if (!dropEl) return;
  738.             dropEl.classList.add(‘drag-accept’);
  739.             const isVideo = (file) => file.type.startsWith(‘video/’);
  741.             const prevent = (e) => { e.preventDefault(); e.stopPropagation(); };
  742.             [‘dragenter’,’dragover’].forEach(ev => {
  743.                 dropEl.addEventListener(ev, (e) => { prevent(e); dropEl.classList.add(‘dragover’); });
  744.             });
  745.             [‘dragleave’,’drop’].forEach(ev => {
  746.                 dropEl.addEventListener(ev, (e) => { prevent(e); dropEl.classList.remove(‘dragover’); });
  747.             });
  749.             dropEl.addEventListener(‘drop’, (e) => {
  750.                 const file = e.dataTransfer?.files?.[0];
  751.                 if (!file) return;
  752.                 if (!isVideo(file)) {
  753.                     alert(‘请拖入视频文件’);
  754.                     return;
  755.                 }
  756.                 droppedVideoFile = file;
  757.                 const statusEl = document.getElementById(‘generateStatus’);
  758.                 statusEl.textContent = `已选择（拖拽）：${file.name}`;
  759.             });
  760.         })();
  762.         // 文件生成处理
  763.         document.getElementById(‘generateBtn’).addEventListener(‘click’, async function() {
  764.             const videoFileInput = document.getElementById(‘videoFile’);
  765.             const statusEl = document.getElementById(‘generateStatus’);
  766.             const progressEl = document.getElementById(‘generateProgress’);
  767.             const progressContainer = document.getElementById(‘generateProgressContainer’);
  768.             const downloadBtn = document.getElementById(‘generateDownloadBtn’);
  769.             const videoFile = videoFileInput.files[0] || droppedVideoFile;
  771.             if (!videoFile) {
  772.                 alert(“请选择或拖拽视频文件”);
  773.                 return;
  774.             }
  776.             try {
  777.                 statusEl.textContent = “正在准备生成文件…”;
  778.                 progressContainer.style.display = ‘block’;
  779.                 progressEl.style.width = ‘0%’;
  780.                 downloadBtn.classList.add(‘hidden’);
  781.                  
  782.                 // 1. 创建ZIP
  783.                 const zip = new JSZip();
  784.                 zip.file(videoFile.name, videoFile);
  785.                  
  786.                 // 2. 生成ZIP
  787.                 statusEl.textContent = “正在生成ZIP文件…”;
  788.                 const zipBlob = await zip.generateAsync({type: ‘blob’}, (metadata) => {
  789.                     progressEl.style.width = `${metadata.percent}%`;
  790.                 });
  791.                  
  792.                 // 3. 获取封面图片（优先使用用户选择的图片）
  793.                 let imageBlob;
  794.                 if (customCoverImageBlob) {
  795.                     statusEl.textContent = “已选择自定义图片，正在读取…”;
  796.                     imageBlob = customCoverImageBlob;
  797.                 } else {
  798.                     statusEl.textContent = “正在获取默认图片…”;
  799.                     const imageResp = await fetch(‘./img/iii.jpg’);
  800.                     imageBlob = await imageResp.blob();
  801.                 }
  802.                  
  803.                 // 4. 合并文件
  804.                 statusEl.textContent = “正在合并文件…”;
  805.                 const mergedBlob = new Blob([
  806.                     await imageBlob.arrayBuffer(),
  807.                     await zipBlob.arrayBuffer()
  808.                 ], { type: ‘image/jpeg’ });
  810.                 currentGeneratedBlob = mergedBlob;
  811.                 statusEl.textContent = “生成成功！”;
  812.                 downloadBtn.classList.remove(‘hidden’);
  814.             } catch (error) {
  815.                 console.error(“生成失败:”, error);
  816.                 statusEl.textContent = `错误: ${error.message}`;
  817.                 progressEl.style.width = ‘0%’;
  818.             } finally {
  819.                 setTimeout(() => {
  820.                     progressContainer.style.display = ‘none’;
  821.                 }, 500);
  822.             }
  823.         });
  824.          
  825.         // 生成文件下载
  826.         document.getElementById(‘generateDownloadBtn’).addEventListener(‘click’, function() {
  827.             if (currentGeneratedBlob) {
  828.                 saveAs(currentGeneratedBlob, ‘merged_image.jpg’);
  829.             }
  830.         });
  831.     // 全局拦截，避免把文件拖到页面其它区域时被浏览器直接打开
  832.     (function() {
  833.         const prevent = (e) => { e.preventDefault(); e.stopPropagation(); };
  834.         window.addEventListener(‘dragover’, prevent);
  835.         window.addEventListener(‘drop’, prevent);
  836.     })();
  837.     </script>
  838.     <style>
  839.         .corner-links {
  840.             position: fixed;
  841.             right: 20px;
  842.             bottom: 20px;
  843.             display: flex;
  844.             align-items: center;
  845.             z-index: 9999;
  846.         }
  847.         .corner-link {
  848.             display: inline-flex;
  849.             align-items: center;
  850.             gap: 8px;
  851.             padding: 8px 10px;
  852.             border-radius: 8px;
  853.             color: #212529;
  854.             text-decoration: none;
  855.             transition: all 0.3s ease;
  856.         }
  857.         .corner-link:hover {
  858.             transform: translateY(-2px);
  859.             box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  860.         }
  861.         .corner-link img,
  862.         .corner-link svg {
  863.             width: 22px;
  864.             height: 22px;
  865.         }
  866.         .corner-link .label {
  867.             font-weight: 600;
  868.             font-size: 0.95rem;
  869.         }
  870.     </style>
  871.     <div class=”corner-links” aria-label=”页面固定链接”>
  872.         <a class=”corner-link” href=”https://github.com/IIIStudio/Copy-B” target=”_blank” rel=”noopener noreferrer” aria-label=”前往 GitHub 仓库”>
  873.             <!– 内联 GitHub 图标，避免外部资源依赖 –>
  874.             <svg viewBox=”0 0 24 24″ aria-hidden=”true” focusable=”false” xmlns=”http://www.w3.org/2000/svg”>
  875.                 <path fill=”#24292F” d=”M12 .5a12 12 0 0 0-3.79 23.41c.6.11.82-.26.82-.58v-2.02c-3.35.73-4.06-1.61-4.06-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.09-.75.08-.74.08-.74 1.2.09 1.83 1.23 1.83 1.23 1.07 1.83 2.8 1.3 3.49.99.11-.78.42-1.3.76-1.6-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.13-.3-.54-1.51.12-3.15 0 0 1.01-.32 3.3 1.23.96-.27 1.99-.4 3.01-.4s2.05.14 3.01.4c2.29-1.55 3.3-1.23 3.3-1.23.66 1.64.25 2.85.12 3.15.77.84 1.24 1.91 1.24 3.22 0 4.61-2.8 5.63-5.47 5.93.43.37.81 1.1.81 2.22v3.29c0 .32.22.7.83.58A12 12 0 0 0 12 .5Z”/>
  876.             </svg>
  877.             <span class=”label”>Copy-B</span>
  878.         </a>
  879.         <a class=”corner-link” href=”https://cnb.cool/IIIStudio/HTML/Copy-B/” target=”_blank” rel=”noopener noreferrer” aria-label=”前往 Copy-B 文档页面”>
  880.             <img src=”https://docs.cnb.cool/images/logo/svg/LogoColorfulIcon.svg” alt=”CNB Logo”>
  881.         </a>
  882.     </div>
  883. </body>
  884. </html>

复制代码

内容已被隐藏，请输入验证码查看

关注微信公众号（魔王科技），发送"验证码"获取

0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯
个人中心
今日签到
有新私信 私信列表
搜索

  • 扫码打开当前页

  • 关注公众号： 越狱大魔王获取资源更新提醒

返回顶部