一个隐藏视频的小玩意

小K · 发表于 2025-10-6 00:01:00

GitHub：https://github.com/IIIStudio/Copy-B
CNB：https://cnb.cool/IIIStudio/HTML/Copy-B
演示：https://iiistudio.github.io/Copy-B/

测试的文件：

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Copy /B</title>
<style>
      body {
         font-family: "Microsoft YaHei", sans-serif;
         max-width: 900px;
         margin: 0 auto;
         padding: 20px;
         text-align: center;
         background-color: #f5f5f5;
      }
      .container {
      }
      .tab-container {
         display: flex;
         margin-bottom: 20px;
      }
      .tab {
         padding: 10px 20px;
         cursor: pointer;
         background-color: #e0e0e0;
         border-radius: 5px;
         margin-right: 5px;
      }
      .tab.active {
         background-color: #4CAF50;
         color: white;
      }
      .tab-content {
         display: none;
         padding: 20px;
         border: 1px solid #ddd;
         border-radius: 0 0 5px 5px;
         background-color: white;
      }
      .tab-content.active {
         display: block;
         border: 2px dashed #ccc;
         border-radius: 8px;
      }
      .media-preview {
         max-width: 100%;
         max-height: 300px;
         margin: 15px auto;
         border: 1px solid #ddd;
         border-radius: 5px;
         display: block;
      }
      .video-container {
         position: relative;
         width: 100%;
         max-width: 800px;
         margin: 15px auto;
         background-color: #000;
         border-radius: 5px;
         overflow: hidden;
         display: none;
      }
      .video-container video {
         width: 100%;
         height: auto;
         max-height: 500px;
         display: block;
      }
      .file-input-label, .btn {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         padding: 10px 20px;
         min-width: 160px;
         box-sizing: border-box;
         white-space: nowrap;
         background-color: #4CAF50;
         color: white;
         border-radius: 4px;
         cursor: pointer;
         margin: 10px;
         text-align: center;
         border: none;
         transition: background-color 0.3s;
      }
      .file-input-label:hover, .btn:hover {
         background-color: #45a049;
      }
      .btn-secondary {
         background-color: #2196F3;
      }
      .btn-secondary:hover {
         background-color: #0b7dda;
      }
      .btn-danger {
         background-color: #f44336;
      }
      .btn-danger:hover {
         background-color: #da190b;
      }
      #status {
         margin: 15px 0;
         min-height: 20px;
         color: #666;
      }
      .progress-container {
         width: 100%;
         background-color: #f1f1f1;
         border-radius: 5px;
         margin: 10px 0;
         display: none;
      }
      .progress-bar {
         height: 20px;
         border-radius: 5px;
         background-color: #4CAF50;
         width: 0%;
         transition: width 0.3s;
      }
      input[type="text"] {
         padding: 10px;
         width: 80%;
         margin: 10px 0;
         border: 1px solid #ddd;
         border-radius: 4px;
      }
      .hidden {
         display: none;
      }
      .controls {
         margin-top: 20px;
      }
      @media (max-width: 600px) {
         .tab-container {
            flex-direction: column;
         }
         .tab {
            margin-right: 0;
            margin-bottom: 5px;
            border-radius: 5px;
         }
         input[type="text"] {
            width: 95%;
         }
         .video-container {
            max-height: 300px;
         }
      }

      #generate .file-input-label,
      #generate #generateBtn {
         width: 150px !important;
         min-width: 150px !important;
         height: 40px !important;
         padding: 0 !important;
         margin: 10px !important;
         display: inline-flex !important;
         align-items: center !important;
         justify-content: center !important;
         box-sizing: border-box !important;
         line-height: 44px !important;
         font-size: 16px !important;
         white-space: nowrap !important;
         vertical-align: middle !important;
      }
      /* 拖拽高亮样式（作用于整个面板区域） */
      .tab-content.drag-accept { position: relative; }
      .tab-content.drag-accept.dragover {
         border-color: #4CAF50 !important;
         box-shadow: 0 0 0 2px #4CAF50 inset;
         background: #f0fff4;
      }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
</head>
<body>

<script>
document.body.innerHTML = '';

// Create container
const container = document.createElement('div');
container.className = 'container';
document.body.appendChild(container);

// Create heading
//const h1 = document.createElement('h1');
//h1.textContent = '隐藏视频播放器';
//container.appendChild(h1);

// Create tab container
const tabContainer = document.createElement('div');
tabContainer.className = 'tab-container';
container.appendChild(tabContainer);

// Create tabs
const tabs = [
   { text: '文件生成', tab: 'generate', active: true },
   { text: '本地文件', tab: 'local', active: false },
   { text: 'URL转换', tab: 'url', active: false }
];

tabs.forEach(tabData => {
   const tab = document.createElement('div');
   tab.className = `tab ${tabData.active ? 'active' : ''}`;
   tab.textContent = tabData.text;
   tab.setAttribute('data-tab', tabData.tab);
   tabContainer.appendChild(tab);
});

// Create tab contents
const tabContents = [
   {
      id: 'local',
      active: false,
      title: '本地文件提取',
      description: '选择通过 copy /b 命令合并的图片+视频文件',
      content: `
      <label for="localFile" id="localChooseLabel" class="file-input-label">选择本地文件</label>
      <input type="file" id="localFile" accept=".jpg,.jpeg,.png" class="hidden">

      <div id="localStatus" class="status">等待选择文件...</div>
      <div class="progress-container" id="localProgressContainer">
         <div id="localProgress" class="progress-bar"></div>
      </div>

      <img id="localPreview" class="media-preview hidden">
      <div class="video-container" id="localVideoContainer">
         <video controls id="localVideoPlayer"></video>
      </div>

      <div class="controls">
         <button id="localDownloadBtn" class="btn btn-secondary hidden">下载视频</button>
      </div>
      `
   },
   {
      id: 'url',
      active: false,
      title: 'URL转换工具',
      description: '输入图片URL，提取隐藏视频',
      content: `
      <input type="text" id="imageUrl" placeholder="输入图片URL (如:

)">

      <button id="fetchUrlBtn" class="btn">提取视频</button>

      <div id="urlStatus" class="status">等待输入URL...</div>
      <div class="progress-container" id="urlProgressContainer">
         <div id="urlProgress" class="progress-bar"></div>
      </div>

      <img id="urlPreview" class="media-preview hidden">
      <div class="video-container" id="urlVideoContainer">
         <video controls id="urlVideoPlayer"></video>
      </div>

      <div class="controls">
         <button id="urlDownloadBtn" class="btn btn-secondary hidden">下载视频</button>
      </div>
      `
   },
   {
      id: 'generate',
      active: true,
      title: '文件生成工具',
      description: '选择视频文件，生成合并的图片文件',
      content: `
      <div>
         <img id="defaultPreview" src="./img/iii.jpg" class="media-preview" title="点击更换图片">
      </div>
      
      <input type="file" id="coverImageFile" accept="image/*" class="hidden">

      <label for="videoFile" class="file-input-label">选择视频文件</label>
      <input type="file" id="videoFile" accept="video/*" class="hidden">

      <button id="generateBtn" class="btn">生成合并图片</button>

      <div id="generateStatus" class="status">等待选择视频文件...</div>
      <div class="progress-container" id="generateProgressContainer">
         <div id="generateProgress" class="progress-bar"></div>
      </div>

      <div class="controls">
         <button id="generateDownloadBtn" class="btn btn-secondary hidden">下载合并图片</button>
      </div>
      `
   }
];

tabContents.forEach(contentData => {
   const content = document.createElement('div');
   content.id = contentData.id;
   content.className = `tab-content ${contentData.active ? 'active' : ''}`;

   const h2 = document.createElement('h2');
   h2.textContent = contentData.title;
   if (contentData.id === 'local') h2.id = 'localTitle';
   if (contentData.id === 'url') h2.id = 'urlTitle';
   content.appendChild(h2);

   const p = document.createElement('p');
   p.textContent = contentData.description;
   if (contentData.id === 'local') p.id = 'localDesc';
   if (contentData.id === 'url') p.id = 'urlDesc';
   content.appendChild(p);

   content.innerHTML += contentData.content;
   container.appendChild(content);
});

// Add tab switching functionality
const tabsElements = document.querySelectorAll('.tab');
tabsElements.forEach(tab => {
   tab.addEventListener('click', () => {
      // Remove active class from all tabs and contents
      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
      document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));

      // Add active class to clicked tab and corresponding content
      tab.classList.add('active');
      const tabId = tab.getAttribute('data-tab');
      document.getElementById(tabId).classList.add('active');
   });
});
      // 全局变量
      let currentVideoBlob = null;
      let currentGeneratedBlob = null;
      let droppedVideoFile = null; // 拖拽到“文件生成工具”的视频文件
      let customCoverImageBlob = null; // 用户自选的封面图片

      // 切换选项卡
      document.querySelectorAll('.tab').forEach(tab => {
         tab.addEventListener('click', () => {
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));

            tab.classList.add('active');
            document.getElementById(tab.dataset.tab).classList.add('active');
         });
      });

      // 本地文件处理
      document.getElementById('localFile').addEventListener('change', async function(e) {
         const file = e.target.files[0];
         if (!file) return;

         const statusEl = document.getElementById('localStatus');
         const progressContainer = document.getElementById('localProgressContainer');
         const progressEl = document.getElementById('localProgress');
         const videoContainer = document.getElementById('localVideoContainer');
         const videoPlayer = document.getElementById('localVideoPlayer');
         const previewImg = document.getElementById('localPreview');
         const downloadBtn = document.getElementById('localDownloadBtn');

         // 重置状态
         statusEl.textContent = "正在处理文件...";
         progressContainer.style.display = 'block';
         progressEl.style.width = '0%';
         videoContainer.style.display = 'none';
         downloadBtn.classList.add('hidden');
         currentVideoBlob = null;

         try {
            // 显示预览图片
            previewImg.src = URL.createObjectURL(file);
            previewImg.classList.remove('hidden');

            // 1. 读取文件内容
            const arrayBuffer = await file.arrayBuffer();
            progressEl.style.width = '20%';

            // 2. 查找ZIP文件起始位置
            statusEl.textContent = "正在查找隐藏内容...";
            const uint8Array = new Uint8Array(arrayBuffer);
            let zipStart = -1;

            // 查找ZIP文件头 (PK\x03\x04)
            for (let i = 0; i < uint8Array.length - 4; i++) {
                  if (uint8Array === 0x50 && uint8Array[i+1] === 0x4B &&
                     uint8Array[i+2] === 0x03 && uint8Array[i+3] === 0x04) {
                     zipStart = i;
                     break;
                  }
            }

            if (zipStart === -1) throw new Error("未检测到隐藏内容");
            progressEl.style.width = '40%';

            // 3. 提取ZIP部分
            statusEl.textContent = "正在提取隐藏数据...";
            const zipData = arrayBuffer.slice(zipStart);
            progressEl.style.width = '60%';

            // 4. 使用JSZip解析ZIP
            statusEl.textContent = "正在解析内容...";
            const zip = await JSZip.loadAsync(zipData);
            progressEl.style.width = '80%';

            // 5. 查找视频文件
            statusEl.textContent = "正在查找视频文件...";
            let videoFile = null;
            const videoExtensions = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv'];

            for (const [name, file] of Object.entries(zip.files)) {
                  if (!file.dir && videoExtensions.some(ext => name.toLowerCase().endsWith(ext))) {
                     videoFile = file;
                     break;
                  }
            }

            if (!videoFile) throw new Error("未找到支持的视频文件");

            // 6. 提取视频内容
            statusEl.textContent = "正在提取视频...";
            const videoData = await videoFile.async('blob');
            currentVideoBlob = videoData;
            progressEl.style.width = '100%';

            // 7. 播放视频
            videoPlayer.src = URL.createObjectURL(videoData);
            videoContainer.style.display = 'block';
            downloadBtn.classList.remove('hidden');

            statusEl.textContent = `已加载: ${videoFile.name}`;

            // 成功后：隐藏标题、描述、选择按钮与预览图，仅保留文件名与视频
            const lt = document.getElementById('localTitle');
            const ld = document.getElementById('localDesc');
            const ll = document.getElementById('localChooseLabel');
            if (lt) lt.style.display = 'none';
            if (ld) ld.style.display = 'none';
            if (ll) ll.style.display = 'none';
            previewImg.classList.add('hidden');

            // 自动播放
            videoPlayer.play().catch(e => {
                  statusEl.textContent += " (点击播放按钮开始播放)";
            });

         } catch (error) {
            console.error("处理失败:", error);
            statusEl.textContent = `错误: ${error.message}`;
            progressEl.style.width = '0%';
            videoContainer.style.display = 'none';
         } finally {
            setTimeout(() => {
                  progressContainer.style.display = 'none';
            }, 500);
         }
      });

      // 本地图片拖拽上传（整个面板区域可拖拽）
      (function() {
         const dropEl = document.getElementById('local');
         if (!dropEl) return;
         dropEl.classList.add('drag-accept');
         const isImage = (file) => {
            const name = (file.name || '').toLowerCase();
            return file.type.startsWith('image/') || name.endsWith('.jpg') || name.endsWith('.jpeg') || name.endsWith('.png');
         };
         const prevent = (e) => { e.preventDefault(); e.stopPropagation(); };

         ['dragenter','dragover'].forEach(ev => {
            dropEl.addEventListener(ev, (e) => { prevent(e); dropEl.classList.add('dragover'); });
         });
         ['dragleave','drop'].forEach(ev => {
            dropEl.addEventListener(ev, (e) => { prevent(e); dropEl.classList.remove('dragover'); });
         });

         dropEl.addEventListener('drop', async (e) => {
            const file = e.dataTransfer?.files?.[0];
            if (!file) return;
            if (!isImage(file)) {
                  alert('请拖入 JPG/PNG 图片文件');
                  return;
            }

            const statusEl = document.getElementById('localStatus');
            const progressContainer = document.getElementById('localProgressContainer');
            const progressEl = document.getElementById('localProgress');
            const videoContainer = document.getElementById('localVideoContainer');
            const videoPlayer = document.getElementById('localVideoPlayer');
            const previewImg = document.getElementById('localPreview');
            const downloadBtn = document.getElementById('localDownloadBtn');
            currentVideoBlob = null;

            try {
                  statusEl.textContent = "正在处理文件...";
                  progressContainer.style.display = 'block';
                  progressEl.style.width = '0%';
                  videoContainer.style.display = 'none';
                  downloadBtn.classList.add('hidden');

                  // 预览图片
                  previewImg.src = URL.createObjectURL(file);
                  previewImg.classList.remove('hidden');

                  // 读取内容
                  const arrayBuffer = await file.arrayBuffer();
                  progressEl.style.width = '20%';

                  // 查找 ZIP 头
                  statusEl.textContent = "正在查找隐藏内容...";
                  const uint8Array = new Uint8Array(arrayBuffer);
                  let zipStart = -1;
                  for (let i = 0; i < uint8Array.length - 4; i++) {
                     if (uint8Array === 0x50 && uint8Array[i+1] === 0x4B && uint8Array[i+2] === 0x03 && uint8Array[i+3] === 0x04) {
                        zipStart = i;
                        break;
                     }
                  }
                  if (zipStart === -1) throw new Error("未检测到隐藏内容");
                  progressEl.style.width = '40%';

                  // 提取/解析 ZIP
                  statusEl.textContent = "正在提取隐藏数据...";
                  const zipData = arrayBuffer.slice(zipStart);
                  progressEl.style.width = '60%';
                  statusEl.textContent = "正在解析内容...";
                  const zip = await JSZip.loadAsync(zipData);
                  progressEl.style.width = '80%';

                  // 查找视频
                  statusEl.textContent = "正在查找视频文件...";
                  let videoFile = null;
                  const videoExtensions = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv'];
                  for (const [name, zf] of Object.entries(zip.files)) {
                     if (!zf.dir && videoExtensions.some(ext => name.toLowerCase().endsWith(ext))) {
                        videoFile = zf;
                        break;
                     }
                  }
                  if (!videoFile) throw new Error("未找到支持的视频文件");

                  // 提取视频
                  statusEl.textContent = "正在提取视频...";
                  const videoData = await videoFile.async('blob');
                  currentVideoBlob = videoData;
                  progressEl.style.width = '100%';

                  // 播放展示
                  videoPlayer.src = URL.createObjectURL(videoData);
                  videoContainer.style.display = 'block';
                  downloadBtn.classList.remove('hidden');
                  statusEl.textContent = `已加载: ${videoFile.name}`;

                  // 成功后：隐藏标题、描述、选择按钮与预览图，仅保留文件名与视频
                  const lt = document.getElementById('localTitle');
                  const ld = document.getElementById('localDesc');
                  const ll = document.getElementById('localChooseLabel');
                  if (lt) lt.style.display = 'none';
                  if (ld) ld.style.display = 'none';
                  if (ll) ll.style.display = 'none';
                  previewImg.classList.add('hidden');

                  videoPlayer.play().catch(() => {
                     statusEl.textContent += " (点击播放按钮开始播放)";
                  });
            } catch (err) {
                  console.error('拖拽处理失败:', err);
                  statusEl.textContent = `错误: ${err.message}`;
                  progressEl.style.width = '0%';
                  videoContainer.style.display = 'none';
            } finally {
                  setTimeout(() => { progressContainer.style.display = 'none'; }, 500);
            }
         });
      })();

      // 本地文件下载
      document.getElementById('localDownloadBtn').addEventListener('click', function() {
         if (currentVideoBlob) {
            saveAs(currentVideoBlob, 'extracted_video.mp4');
         }
      });

      // URL转换处理
      document.getElementById('fetchUrlBtn').addEventListener('click', async function() {
         const imageUrl = document.getElementById('imageUrl').value.trim();

         if (!imageUrl) {
            alert("请输入图片URL");
            return;
         }

         const statusEl = document.getElementById('urlStatus');
         const progressContainer = document.getElementById('urlProgressContainer');
         const progressEl = document.getElementById('urlProgress');
         const videoContainer = document.getElementById('urlVideoContainer');
         const videoPlayer = document.getElementById('urlVideoPlayer');
         const previewImg = document.getElementById('urlPreview');
         const downloadBtn = document.getElementById('urlDownloadBtn');

         // 重置状态
         statusEl.textContent = "正在获取图片...";
         progressContainer.style.display = 'block';
         progressEl.style.width = '0%';
         videoContainer.style.display = 'none';
         downloadBtn.classList.add('hidden');
         currentVideoBlob = null;

         try {
            // 显示预览图片
            previewImg.src = imageUrl;
            previewImg.classList.remove('hidden');

            // 1. 获取图片
            const response = await fetch(imageUrl);
            if (!response.ok) throw new Error(`获取图片失败: ${response.status}`);

            progressEl.style.width = '20%';

            // 2. 读取图片内容
            const arrayBuffer = await response.arrayBuffer();
            progressEl.style.width = '40%';

            // 3. 查找ZIP文件起始位置
            statusEl.textContent = "正在查找隐藏内容...";
            const uint8Array = new Uint8Array(arrayBuffer);
            let zipStart = -1;

            for (let i = 0; i < uint8Array.length - 4; i++) {
                  if (uint8Array === 0x50 && uint8Array[i+1] === 0x4B &&
                     uint8Array[i+2] === 0x03 && uint8Array[i+3] === 0x04) {
                     zipStart = i;
                     break;
                  }
            }

            if (zipStart === -1) throw new Error("未检测到隐藏内容");
            progressEl.style.width = '60%';

            // 4. 提取ZIP部分
            statusEl.textContent = "正在提取隐藏数据...";
            const zipData = arrayBuffer.slice(zipStart);
            progressEl.style.width = '80%';

            // 5. 使用JSZip解析ZIP
            statusEl.textContent = "正在解析内容...";
            const zip = await JSZip.loadAsync(zipData);

            // 6. 查找视频文件
            statusEl.textContent = "正在查找视频文件...";
            let videoFile = null;
            const videoExtensions = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv'];

            for (const [name, file] of Object.entries(zip.files)) {
                  if (!file.dir && videoExtensions.some(ext => name.toLowerCase().endsWith(ext))) {
                     videoFile = file;
                     break;
                  }
            }

            if (!videoFile) throw new Error("未找到支持的视频文件");

            // 7. 提取视频内容
            statusEl.textContent = "正在提取视频...";
            const videoData = await videoFile.async('blob');
            currentVideoBlob = videoData;
            progressEl.style.width = '100%';

            // 8. 播放视频
            videoPlayer.src = URL.createObjectURL(videoData);
            videoContainer.style.display = 'block';

            statusEl.textContent = `已加载: ${videoFile.name}`;

            // 成功后：仅保留文件名与视频，隐藏其它控件
            const ut = document.getElementById('urlTitle');
            const ud = document.getElementById('urlDesc');
            const urlInput = document.getElementById('imageUrl');
            const fetchBtn = document.getElementById('fetchUrlBtn');
            const urlPrev = document.getElementById('urlPreview');
            const urlDl  = document.getElementById('urlDownloadBtn');
            if (ut) ut.style.display = 'none';
            if (ud) ud.style.display = 'none';
            if (urlInput) urlInput.style.display = 'none';
            if (fetchBtn) fetchBtn.style.display = 'none';
            if (urlPrev) urlPrev.classList.add('hidden');
            if (urlDl) urlDl.classList.add('hidden');

            // 自动播放
            videoPlayer.play().catch(e => {
                  statusEl.textContent += " (点击播放按钮开始播放)";
            });

         } catch (error) {
            console.error("处理失败:", error);
            statusEl.textContent = `错误: ${error.message}`;
            progressEl.style.width = '0%';
            videoContainer.style.display = 'none';
         } finally {
            setTimeout(() => {
                  progressContainer.style.display = 'none';
            }, 500);
         }
      });

      // URL文件下载
      document.getElementById('urlDownloadBtn').addEventListener('click', function() {
         if (currentVideoBlob) {
            saveAs(currentVideoBlob, 'extracted_video.mp4');
         }
      });

      // 点击生成面板图片以更换封面
      (function() {
         const previewImg = document.getElementById('defaultPreview');
         const coverInput = document.getElementById('coverImageFile');
         if (!previewImg || !coverInput) return;

         previewImg.style.cursor = 'pointer';
         previewImg.addEventListener('click', () => {
            // 提示并打开文件选择
            coverInput.click();
         });

         coverInput.addEventListener('change', async () => {
            const file = coverInput.files && coverInput.files[0];
            if (!file) return;
            // 保存自定义封面并更新预览
            customCoverImageBlob = file;
            try {
                  const objectUrl = URL.createObjectURL(file);
                  previewImg.src = objectUrl;
                  const statusEl = document.getElementById('generateStatus');
                  if (statusEl) statusEl.textContent = `已选择封面图片：${file.name}`;
            } catch (_) {}
         });
      })();

      // “文件生成工具”拖拽上传（整个面板区域可拖拽）
      (function() {
         const dropEl = document.getElementById('generate');
         if (!dropEl) return;
         dropEl.classList.add('drag-accept');
         const isVideo = (file) => file.type.startsWith('video/');

         const prevent = (e) => { e.preventDefault(); e.stopPropagation(); };
         ['dragenter','dragover'].forEach(ev => {
            dropEl.addEventListener(ev, (e) => { prevent(e); dropEl.classList.add('dragover'); });
         });
         ['dragleave','drop'].forEach(ev => {
            dropEl.addEventListener(ev, (e) => { prevent(e); dropEl.classList.remove('dragover'); });
         });

         dropEl.addEventListener('drop', (e) => {
            const file = e.dataTransfer?.files?.[0];
            if (!file) return;
            if (!isVideo(file)) {
                  alert('请拖入视频文件');
                  return;
            }
            droppedVideoFile = file;
            const statusEl = document.getElementById('generateStatus');
            statusEl.textContent = `已选择（拖拽）：${file.name}`;
         });
      })();

      // 文件生成处理
      document.getElementById('generateBtn').addEventListener('click', async function() {
         const videoFileInput = document.getElementById('videoFile');
         const statusEl = document.getElementById('generateStatus');
         const progressEl = document.getElementById('generateProgress');
         const progressContainer = document.getElementById('generateProgressContainer');
         const downloadBtn = document.getElementById('generateDownloadBtn');
         const videoFile = videoFileInput.files[0] || droppedVideoFile;

         if (!videoFile) {
            alert("请选择或拖拽视频文件");
            return;
         }

         try {
            statusEl.textContent = "正在准备生成文件...";
            progressContainer.style.display = 'block';
            progressEl.style.width = '0%';
            downloadBtn.classList.add('hidden');

            // 1. 创建ZIP
            const zip = new JSZip();
            zip.file(videoFile.name, videoFile);

            // 2. 生成ZIP
            statusEl.textContent = "正在生成ZIP文件...";
            const zipBlob = await zip.generateAsync({type: 'blob'}, (metadata) => {
                  progressEl.style.width = `${metadata.percent}%`;
            });

            // 3. 获取封面图片（优先使用用户选择的图片）
            let imageBlob;
            if (customCoverImageBlob) {
                  statusEl.textContent = "已选择自定义图片，正在读取...";
                  imageBlob = customCoverImageBlob;
            } else {
                  statusEl.textContent = "正在获取默认图片...";
                  const imageResp = await fetch('./img/iii.jpg');
                  imageBlob = await imageResp.blob();
            }

            // 4. 合并文件
            statusEl.textContent = "正在合并文件...";
            const mergedBlob = new Blob([
                  await imageBlob.arrayBuffer(),
                  await zipBlob.arrayBuffer()
            ], { type: 'image/jpeg' });

            currentGeneratedBlob = mergedBlob;
            statusEl.textContent = "生成成功！";
            downloadBtn.classList.remove('hidden');

         } catch (error) {
            console.error("生成失败:", error);
            statusEl.textContent = `错误: ${error.message}`;
            progressEl.style.width = '0%';
         } finally {
            setTimeout(() => {
                  progressContainer.style.display = 'none';
            }, 500);
         }
      });

      // 生成文件下载
      document.getElementById('generateDownloadBtn').addEventListener('click', function() {
         if (currentGeneratedBlob) {
            saveAs(currentGeneratedBlob, 'merged_image.jpg');
         }
      });
// 全局拦截，避免把文件拖到页面其它区域时被浏览器直接打开
(function() {
      const prevent = (e) => { e.preventDefault(); e.stopPropagation(); };
      window.addEventListener('dragover', prevent);
      window.addEventListener('drop', prevent);
})();
</script>
<style>
      .corner-links {
         position: fixed;
         right: 20px;
         bottom: 20px;
         display: flex;
         align-items: center;
         z-index: 9999;
      }
      .corner-link {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 8px 10px;
         border-radius: 8px;
         color: #212529;
         text-decoration: none;
         transition: all 0.3s ease;
      }
      .corner-link:hover {
         transform: translateY(-2px);
         box-shadow: 0 6px 12px rgba(0,0,0,0.15);
      }
      .corner-link img,
      .corner-link svg {
         width: 22px;
         height: 22px;
      }
      .corner-link .label {
         font-weight: 600;
         font-size: 0.95rem;
      }
</style>
<div class="corner-links" aria-label="页面固定链接">
      <a class="corner-link" href="https://github.com/IIIStudio/Copy-B" target="_blank" rel="noopener noreferrer" aria-label="前往 GitHub 仓库">
         
         <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
            <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"/>
         </svg>
         <span class="label">Copy-B</span>
      </a>
      <a class="corner-link" href="https://cnb.cool/IIIStudio/HTML/Copy-B/" target="_blank" rel="noopener noreferrer" aria-label="前往 Copy-B 文档页面">
         <img src="https://docs.cnb.cool/images/logo/svg/LogoColorfulIcon.svg" alt="CNB Logo">
      </a>
</div>
</body>
</html>
复制代码