🏠 Home　

video

video list

Dette script bør ikke installeres direkte. Det er et bibliotek, som andre scripts kan inkludere med metadirektivet // @require https://update.greasyfork.org/scripts/498124/1396763/video.js 

  1. function generateJsonIndexContent(finalData) {
  2. return `
  3. <!DOCTYPE html>
  4. <html lang="en" data-theme="light">
  5. <head>
  6. <meta charset="UTF-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <title>视频列表</title>
  9. <style>
  10. body {
  11. font-family: Arial, sans-serif;
  12. display: flex;
  13. flex-direction: column;
  14. align-items: center;
  15. padding: 20px;
  16. overflow-x: hidden;
  17. }
  18. .video-row {
  19. display: flex;
  20. flex-wrap: wrap;
  21. justify-content: space-between;
  22. width: 100%;
  23. max-width: 1200px;
  24. margin-bottom: 20px;
  25. }
  26. .notification {
  27. display: none;
  28. position: fixed;
  29. top: 50%;
  30. left: 50%;
  31. transform: translate(-50%, -50%);
  32. background-color: rgba(0, 0, 0, 0.7);
  33. color: white;
  34. padding: 10px;
  35. z-index: 1000;
  36. }
  37. .video {
  38. width: 48%;
  39. position: relative;
  40. max-width: 48%;
  41. position: relative;
  42. cursor: pointer;
  43. display: flex;
  44. flex-direction: column;
  45. align-items: center;
  46. margin-bottom: 20px;
  47. }
  48. .network-label {
  49. position: absolute;
  50. bottom: 4px;
  51. right: 4px;
  52. background-color: rgba(0, 0, 0, 0.7);
  53. color: white;
  54. padding: 2px 4px;
  55. font-size: 10px;
  56. }
  57. .video img {
  58. width: 100%;
  59. height: auto;
  60. }
  61. .video video {
  62. width: 100%;
  63. height: auto;
  64. }
  65. .video-title {
  66. margin: 10px 0;
  67. font-weight: bold;
  68. text-align: center;
  69. }
  70. .video-mark {
  71. color: gray;
  72. text-align: center;
  73. }
  74. @media (min-width: 768px) {
  75. .video {
  76. width: 23.5%;
  77. max-width: 23.5%;
  78. }
  79. }
  80. .sidebar {
  81. position: fixed;
  82. right: -300px;
  83. top: 0;
  84. width: 300px;
  85. height: 100%;
  86. background-color: #f1f1f1;
  87. box-shadow: -2px 0 5px rgba(0,0,0,0.5);
  88. transition: right 0.3s;
  89. display: flex;
  90. flex-direction: column;
  91. padding: 20px;
  92. }
  93. .sidebar.open {
  94. right: 0;
  95. }
  96. .sidebar-button {
  97. position: fixed;
  98. right: -70px; /* 贴边隐藏按钮，此处可以调整隐藏时的偏移量 */
  99. top: 95%; /* 垂直居中 */
  100. transform: translateY(-50%); /* 将按钮垂直居中 */
  101. background-color: #4CAF50;
  102. color: white;
  103. border: none;
  104. padding: 10px 15px;
  105. cursor: pointer;
  106. z-index: 1000;
  107. transition: right 0.3s ease; /* 添加过渡效果 */
  108. }
  109. .sidebar-button:hover,
  110. .sidebar-button:focus {
  111. right: 20px; /* 悬停或者焦点时，展示完整按钮 */
  112. }
  113. .sidebar-content button {
  114. background-color: #4CAF50;
  115. color: white;
  116. border: none;
  117. padding: 10px;
  118. margin: 10px 0;
  119. cursor: pointer;
  120. }
  121. .modal {
  122. display: none;
  123. position: fixed;
  124. z-index: 1;
  125. left: 0;
  126. top: 0;
  127. width: 100%;
  128. height: 100%;
  129. overflow: auto;
  130. background-color: rgba(0,0,0,0.4);
  131. }
  132. .modal-content.dark-mode {
  133. background-color: var(--background-dark);
  134. color: var(--text-dark);
  135. border-color: var(--border-dark);
  136. }
  137. .modal-content {
  138. background-color: var(--background-light);
  139. margin: 15% auto;
  140. padding: 20px;
  141. border: 1px solid #888;
  142. width: 80%;
  143. max-width: 600px;
  144. border-radius: 8px;
  145. color: var(--text-light);
  146. }
  147. .modal-close {
  148. color: #aaa;
  149. float: right;
  150. font-size: 28px;
  151. font-weight: bold;
  152. }
  153. .detail-button {
  154. background-color: var(--button-background-light); /* 按钮背景颜色 */
  155. color: var(--button-text-light); /* 文字颜色 */
  156. border: none; /* 去掉边框 */
  157. padding: 10px 20px; /* 按钮内边距 */
  158. cursor: pointer; /* 光标样式 */
  159. outline: none; /* 去掉点击时的边框 */
  160. border-radius: 4px; /* 圆角 */
  161. transition: background-color 0.3s ease, color 0.3s ease; /* 过渡效果 */
  162. }
  163. [data-theme="dark"] .detail-button {
  164. background-color: var(--button-background-dark); /* 按钮背景颜色 */
  165. color: var(--button-text-dark); /* 文字颜色 */
  166. }
  167. [data-theme="light"] .detail-button {
  168. background-color: var(--button-background-light); /* 按钮背景颜色 */
  169. color: var(--button-text-light); /* 文字颜色 */
  170. }
  171. .detail-button:hover {
  172. background-color: #45a049; /* 鼠标悬停时的背景颜色 */
  173. }
  174. .detail-button:focus {
  175. background-color: #388e3c; /* 获得焦点时的背景颜色 */
  176. }
  177. :root {
  178. --background-light: #ffffff;
  179. --background-dark: #000000;
  180. --text-light: #000000;
  181. --text-dark: #ffffff;
  182. --border-light: #cccccc;
  183. --border-dark: #333333;
  184. --modal-background-light: #fefefe;
  185. --modal-background-dark: #1c1c1c; /* 更深的黑色背景 */
  186. --button-background-light: #4CAF50;
  187. --button-background-dark: #444444;
  188. --button-text-light: white;
  189. --button-text-dark: white;
  190. --message-background-light: #f1f1f1;
  191. --message-background-dark: #333333; /* 更深的黑色背景 */
  192. --message-border-light: #ccc;
  193. --message-border-dark: #555; /* 边框颜色 */
  194. }
  195. [data-theme="light"] {
  196. background-color: var(--background-light);
  197. color: var(--text-light);
  198. }
  199. [data-theme="dark"] {
  200. background-color: var(--background-dark);
  201. color: var(--text-dark);
  202. }
  203. [data-theme="light"] .sun {
  204. display: none;
  205. }
  206. [data-theme="dark"] .moon {
  207. display: none;
  208. }
  209. [data-theme="light"] input, [data-theme="light"] button {
  210. background-color: #ffffff;
  211. border: 1px solid var(--border-light);
  212. color: var(--text-light);
  213. }
  214. [data-theme="dark"] .modal-content {
  215. background-color: var(--modal-background-dark);
  216. color: var(--text-dark);
  217. border-color: var(--border-dark);
  218. }
  219. .message {
  220. text-align: center;
  221. padding: 10px;
  222. margin-top: 20px;
  223. background-color: var(--message-background-light);
  224. border: 1px solid var(--message-border-light);
  225. transition: background-color 0.3s, border-color 0.3s, color 0.3s;
  226. }
  227. [data-theme="dark"] .message {
  228. background-color: var(--message-background-dark);
  229. border-color: var(--message-border-dark);
  230. color: var(--text-dark);
  231. }
  232. [data-theme="dark"] input, [data-theme="dark"] button {
  233. background-color: #333333;
  234. border: 1px solid var(--border-dark);
  235. color: var(--text-dark);
  236. }
  237. .toggle {
  238. display: inline-flex;
  239. justify-content: center;
  240. align-items: center;
  241. width: 32px;
  242. height: 32px;
  243. border-radius: 4px;
  244. background-color: #fff;
  245. border: 1px solid #e2e8f0;
  246. cursor: pointer;
  247. position: fixed;
  248. top: 10px;
  249. right: 10px;
  250. }
  251. </style>
  252. </head>
  253. <body>
  254. <button class="toggle">
  255. <svg class="sun" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
  256. <svg class="moon" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
  257. </button>
  258. <button class="sidebar-button" onclick="openModal()">备份信息</button>
  259. <div id="video-container"></div>
  260. <!-- 通知窗口 -->
  261. <div class="notification" id="notification"></div>
  262. <!-- 模态框 -->
  263. <div id="myModal" class="modal">
  264. <div class="modal-content">
  265. <span class="modal-close" onclick="closeMyModal()">&times;</span>
  266. <button type="button" onclick="exportJson()">导出Json</button>
  267. <br><br>
  268. <h2>备份信息</h2>
  269. <p>备份数量: <span id="videoCount"></span></p>
  270. <p>备份时间: <span id="cstTime"></span></p>
  271. <p>备份地址: <a id="backupLink" href="#" target="_blank">访问</a></p>
  272. <p>联系作者: <a href="mailto:toniaiwanowskiskr47@gmail.com" target="_blank">人民的勤务员</a></p>
  273. </form>
  274. </div>
  275. </div>
  276. <script>
  277. document.addEventListener('DOMContentLoaded', (event) => {
  278. function loadHighlightStyle() {
  279. const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
  280. if (isDarkMode) {
  281. toggleDarkMode2('dark');
  282. } else {
  283. toggleDarkMode2('light');
  284. }
  285. }
  286. const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
  287. mediaQuery.addEventListener('change', loadHighlightStyle);
  288. // Initial check
  289. loadHighlightStyle();
  290. });
  291. function toggleDarkMode2(mode) {
  292. const html = document.documentElement;
  293. const isDarkMode = html.getAttribute('data-theme') === 'dark';
  294. const newMode = mode || (isDarkMode ? 'light' : 'dark');
  295. // 验证新模式是否为有效值
  296. if (newMode !== 'dark' && newMode !== 'light') return;
  297. // 设置新的主题模式
  298. html.setAttribute('data-theme', newMode);
  299. // 更新URL中的主题参数，不重新加载页面
  300. const url = new URL(window.location);
  301. url.searchParams.set('theme', newMode);
  302. window.history.replaceState({}, '', url);
  303. }
  304. document.querySelector('.toggle').addEventListener('click', () => toggleDarkMode2());
  305. function exportJson() {
  306. const dataStr = JSON.stringify(jsonData, null, 4); // 将JSON数据转换为字符串格式，并进行格式化
  307. const blob = new Blob([dataStr], { type: 'application/json' }); // 创建一个Blob对象表示JSON数据
  308. const url = URL.createObjectURL(blob); // 创建一个URL指向Blob对象
  309. const a = document.createElement('a'); // 创建一个<a>元素
  310. a.href = url; // 设置<a>元素的href属性为URL
  311. a.download = 'settings.json'; // 设置下载文件的名称
  312. a.click(); // 触发<a>元素的点击事件，从而下载文件
  313. // 释放URL对象
  314. URL.revokeObjectURL(url);
  315. }
  316. function openModal() {
  317. const modal = document.getElementById('myModal');
  318. modal.style.display = 'block';
  319. // 设置视频数量
  320. document.getElementById('videoCount').innerText = videoData.length;
  321. // 设置备份时间（将 UTC 时间转为##时间）
  322. const timestamp = new Date(jsonData.info.timestamp);
  323. const cstTime = timestamp.toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' });
  324. cocstTime = document.getElementById('cstTime');
  325. cocstTime.textContent = cstTime
  326. const backupUrl = jsonData.info.inurl;
  327. const backupLink = document.getElementById('backupLink');
  328. backupLink.href = backupUrl;
  329. }
  330. function closeMyModal() {
  331. const modal = document.getElementById('myModal');
  332. modal.style.display = 'none';
  333. }
  334. const jsonData = ${JSON.stringify(finalData, null, 4)};
  335. const videoData = jsonData.video;
  336. let currentPage = 0;
  337. const pageSizeMobile = 12;
  338. const pageSizePC = 12;
  339. const pageSize = isPC() ? pageSizePC : pageSizeMobile;
  340. let isLoadingVideos = false;
  341. let allVideosLoaded = false;
  342. let firstLoad = true;
  343. function isPC() {
  344. return window.innerWidth >= 768;
  345. }
  346. const originalImages = new Map();
  347. const maxVideosOnMobile = 12; // 设置移动设备上同时播放的视频最大数量
  348. let currentVideosOnMobile = 0;
  349. function isMobileDevice() {
  350. return /Mobi|Android/i.test(navigator.userAgent);
  351. }
  352. function playVideo(element) {
  353. const imgElement = element.querySelector('img');
  354. const videoUrl = imgElement.getAttribute('data-video');
  355. // 保存原始图片元素
  356. if (!originalImages.has(element)) {
  357. originalImages.set(element, imgElement.cloneNode(true));
  358. }
  359. const videoElement = document.createElement('video');
  360. videoElement.controls = false;
  361. videoElement.autoplay = true;
  362. videoElement.loop = true;
  363. videoElement.style.width = '100%';
  364. videoElement.style.height = imgElement.clientHeight + 'px';
  365. videoElement.innerHTML = "<source src='" + videoUrl + "' type='video/mp4'>";
  366. if (isMobileDevice()) {
  367. // 检查是否达到最大视频数量限制
  368. if (currentVideosOnMobile >= maxVideosOnMobile) {
  369. // 停止并恢复其他视频为图片
  370. const videos = document.querySelectorAll('video');
  371. videos.forEach(video => {
  372. video.pause();
  373. video.src = '';
  374. video.load();
  375. const parentElement = video.parentElement;
  376. if (originalImages.has(parentElement)) {
  377. video.replaceWith(originalImages.get(parentElement).cloneNode(true));
  378. currentVideosOnMobile--; // 减少当前播放视频计数
  379. }
  380. });
  381. }
  382. currentVideosOnMobile++; // 增加当前播放视频计数
  383. }
  384. // 替换图片元素
  385. imgElement.replaceWith(videoElement);
  386. }
  387. function createVideoElement(video) {
  388. const videoDiv = document.createElement('div');
  389. videoDiv.classList.add('video');
  390. videoDiv.setAttribute('onclick', 'playVideo(this)');
  391. // 创建图片元素
  392. const imgElement = new Image();
  393. imgElement.alt = video.altText;
  394. imgElement.dataset.video = video.videoUrl;
  395. // 设置本地图片路径
  396. imgElement.src = "img/" + video.fileName + ".jpg";
  397. const netLabel = document.createElement('div');
  398. netLabel.classList.add('network-label');
  399. netLabel.textContent = 'L';
  400. netLabel.style.backgroundColor = '#00FF00';
  401. videoDiv.appendChild(netLabel);
  402. // 检查图片是否加载成功
  403. imgElement.addEventListener('error', function() {
  404. // 图片加载失败时，切换到网络图片
  405. imgElement.src = video.imgUrl;
  406. // 添加网络图片标识
  407. netLabel.style.backgroundColor = '#f44336';
  408. netLabel.textContent = 'N';
  409. videoDiv.appendChild(netLabel);
  410. });
  411. videoDiv.appendChild(imgElement);
  412. // 创建标题元素
  413. const titleElement = document.createElement('a');
  414. titleElement.classList.add('video-title');
  415. const MAX_TITLE_LENGTH = 20; // 最大标题长度
  416. // 拼接标题文本
  417. let titleText = video.fileName + " - " + video.altText;
  418. // 如果标题文本长度超过最大长度，则截取前面的部分
  419. if (titleText.length > MAX_TITLE_LENGTH) {
  420. titleText = titleText.substring(0, MAX_TITLE_LENGTH) + '...';
  421. }
  422. titleElement.textContent =titleText
  423. titleElement.href = video.jumpUrl;
  424. titleElement.target = '_blank'; // 打开新标签页
  425. titleElement.style.textDecoration = 'none'; // 移除下划线
  426. videoDiv.appendChild(titleElement);
  427. // 创建标记内容元素
  428. if (video.info) {
  429. const detailButton = document.createElement('button');
  430. detailButton.textContent = '查看详细';
  431. detailButton.classList.add('detail-button');
  432. detailButton.onclick = function(event) {
  433. event.stopPropagation(); // 阻止事件冒泡，防止触发视频播放
  434. const videoElements = document.querySelectorAll('.video');
  435. const index = Array.prototype.indexOf.call(videoElements, videoDiv);
  436. const videoInfo = jsonData.video[index].info;
  437. openVideoModal(videoInfo);
  438. };
  439. // 将查看详细按钮放在视频条目底部
  440. const detailButtonContainer = document.createElement('div');
  441. detailButtonContainer.classList.add('detail-button-container');
  442. detailButtonContainer.appendChild(detailButton);
  443. videoDiv.appendChild(detailButtonContainer);
  444. }
  445. // 创建左上角的文本
  446. const firstLineElement = document.createElement('div');
  447. firstLineElement.classList.add('mark-first-line');
  448. firstLineElement.textContent = video.markContent;
  449. videoDiv.appendChild(firstLineElement);
  450. // 设置样式
  451. firstLineElement.style.position = 'absolute';
  452. firstLineElement.style.top = '5px';
  453. firstLineElement.style.left = '5px';
  454. firstLineElement.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
  455. firstLineElement.style.color = '#fff';
  456. firstLineElement.style.padding = '5px';
  457. firstLineElement.style.fontSize = '10px';
  458. return videoDiv;
  459. }
  460. function openVideoModal(info) {
  461. const modal = document.createElement('div');
  462. modal.id = 'videoModal';
  463. modal.style.display = 'none'; // 默认隐藏
  464. modal.style.position = 'fixed';
  465. modal.style.zIndex = '1000';
  466. modal.style.left = '0';
  467. modal.style.top = '0';
  468. modal.style.width = '100%';
  469. modal.style.height = '100%';
  470. modal.style.overflow = 'auto';
  471. modal.style.backgroundColor = 'rgba(0, 0, 0, 0.4)'; // 半透明黑色背景
  472. const modalContent = document.createElement('div');
  473. modalContent.classList.add('modal-content-video');
  474. modalContent.style.backgroundColor = '#fefefe'; // 白色背景
  475. modalContent.style.margin = '5% auto'; // 上部5%间距，左右居中
  476. modalContent.style.padding = '20px';
  477. modalContent.style.border = '1px solid #888'; // 灰色边框
  478. modalContent.style.width = '80%';
  479. modalContent.style.position = 'relative'; // 相对定位，用于绝对定位关闭按钮
  480. const closeButton = document.createElement('span');
  481. closeButton.textContent = '×'; // 使用红色 X 号
  482. closeButton.style.position = 'absolute';
  483. closeButton.style.top = '10px';
  484. closeButton.style.right = '10px';
  485. closeButton.style.fontSize = '50px';
  486. closeButton.style.cursor = 'pointer';
  487. closeButton.style.color = 'red'; // 默认红色关闭按钮
  488. closeButton.style.fontWeight = 'bold';
  489. closeButton.onclick = function() {
  490. modal.style.display = 'none'; // 点击关闭按钮关闭模态框
  491. };
  492. modalContent.appendChild(closeButton);
  493. // 创建标题
  494. const title = document.createElement('h2');
  495. title.textContent = '详细信息';
  496. title.style.textAlign = 'center';
  497. modalContent.appendChild(title);
  498. // 解析视频信息对象
  499. const videosInfo = info.videosinfo;
  500. // 创建信息列表
  501. const infoList = document.createElement('ul');
  502. infoList.style.listStyleType = 'none';
  503. infoList.style.padding = '0';
  504. infoList.style.display = 'flex'; // 使用 flex 布局
  505. infoList.style.flexWrap = 'wrap'; // 允许内容换行
  506. // 遍历视频信息对象，创建列表项
  507. for (const key in videosInfo) {
  508. const listItem = document.createElement('li');
  509. listItem.style.marginBottom = '10px';
  510. listItem.style.flex = '1 1 30%'; // 设置每个列表项的宽度，可根据需要调整
  511. const label = document.createElement('strong');
  512. label.textContent = key.replace(/:/, ''); // 去除末尾的冒号
  513. label.style.display = 'block';
  514. listItem.appendChild(label);
  515. // 处理值是数组的情况
  516. if (Array.isArray(videosInfo[key])) {
  517. const values = videosInfo[key];
  518. const valueList = document.createElement('ul');
  519. valueList.style.listStyleType = 'none';
  520. valueList.style.padding = '0';
  521. valueList.style.marginTop = '5px';
  522. values.forEach(value => {
  523. const valueItem = document.createElement('li');
  524. valueItem.style.marginBottom = '3px';
  525. if (typeof value === 'object' && value.name) {
  526. const link = document.createElement('a');
  527. link.textContent = value.name;
  528. link.href = value.link;
  529. link.target = '_blank';
  530. link.style.color = '#0645AD'; // 蓝色链接色
  531. link.style.textDecoration = 'none';
  532. link.style.fontWeight = 'bold';
  533. valueItem.appendChild(link);
  534. } else {
  535. valueItem.textContent = value;
  536. }
  537. valueList.appendChild(valueItem);
  538. });
  539. listItem.appendChild(valueList);
  540. } else {
  541. listItem.textContent += ' ' + videosInfo[key];
  542. }
  543. infoList.appendChild(listItem);
  544. }
  545. // 将信息列表添加到模态框内容
  546. modalContent.appendChild(infoList);
  547. // 创建下载链接列表
  548. if (info.secondElementLinksInfo && info.secondElementLinksInfo.length > 0) {
  549. const downloadList = document.createElement('ul');
  550. downloadList.style.listStyleType = 'none';
  551. downloadList.style.padding = '0';
  552. downloadList.style.marginTop = '20px';
  553. // 添加磁力链下载标题
  554. const titleListItem = document.createElement('li');
  555. const titleStrong = document.createElement('strong');
  556. titleStrong.textContent = '磁力链下载:';
  557. titleListItem.appendChild(titleStrong);
  558. downloadList.appendChild(titleListItem);
  559. // 遍历下载链接信息对象，创建列表项
  560. info.secondElementLinksInfo.forEach((linkInfo, index) => {
  561. const listItem = document.createElement('li');
  562. listItem.style.marginBottom = '10px';
  563. const linkLabel = document.createElement('span');
  564. linkLabel.textContent = (index + 1) + '. '; // 使用字符串拼接
  565. linkLabel.style.fontWeight = 'bold';
  566. linkLabel.style.marginRight = '5px';
  567. listItem.appendChild(linkLabel);
  568. const link = document.createElement('a');
  569. link.textContent = linkInfo.name + ' (' + linkInfo.size + ', ' + linkInfo.date + ')';
  570. link.href = linkInfo.link;
  571. link.target = '_blank';
  572. link.style.color = '#0645AD'; // 蓝色链接色
  573. link.style.textDecoration = 'none';
  574. link.style.fontWeight = 'bold';
  575. listItem.appendChild(link);
  576. downloadList.appendChild(listItem);
  577. });
  578. // 将下载链接列表添加到模态框内容的底部
  579. modalContent.appendChild(downloadList);
  580. }
  581. // 将模态框内容添加到模态框
  582. modal.appendChild(modalContent);
  583. // 将模态框添加到页面主体
  584. document.body.appendChild(modal);
  585. // 根据当前主题设置模态框样式（这部分是您之前提供的代码，不需要修改）
  586. const currentTheme = document.documentElement.getAttribute('data-theme');
  587. if (currentTheme === 'dark') {
  588. modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; // 深色背景
  589. modalContent.style.backgroundColor = '#1c1c1c'; // 深色内容背景
  590. modalContent.style.border = '1px solid #555'; // 深色边框
  591. closeButton.style.color = '#ff6347'; // 深色关闭按钮
  592. }
  593. // 显示模态框
  594. modal.style.display = 'block';
  595. }
  596. // 关闭模态框
  597. function closevideoModal() {
  598. const modal = document.getElementById('videoModal');
  599. modal.style.display = 'none';
  600. }
  601. function showNoMoreVideosMessage() {
  602. const messageDiv = document.createElement('div');
  603. messageDiv.textContent = '没有更多视频了';
  604. messageDiv.className = 'message';
  605. document.body.appendChild(messageDiv);
  606. // 设置定时器清除消息（可选）
  607. setTimeout(() => {
  608. document.body.removeChild(messageDiv);
  609. }, 3000); // 3秒后自动隐藏消息
  610. }
  611. function loadVideos() {
  612. isLoadingVideos = true;
  613. const container = document.getElementById('video-container');
  614. const pageSize = isPC() ? pageSizePC : pageSizeMobile;
  615. const start = currentPage * pageSize;
  616. const end = start + pageSize;
  617. const videosToLoad = videoData.slice(start, end);
  618. const newVideoRow = document.createElement('div');
  619. newVideoRow.classList.add('video-row');
  620. videosToLoad.forEach(video => {
  621. const videoDiv = createVideoElement(video);
  622. newVideoRow.appendChild(videoDiv);
  623. });
  624. container.appendChild(newVideoRow);
  625. currentPage++;
  626. isLoadingVideos = false;
  627. if (firstLoad) {
  628. firstLoad=false;
  629. return;
  630. };
  631. updateNotification(); // 更新通知窗口内容
  632. }
  633. function updateNotification() {
  634. const totalVideos = videoData.length;
  635. const loadedVideos = currentPage * (isPC() ? pageSizePC : pageSizeMobile);
  636. const notificationElement = document.getElementById('notification');
  637. notificationElement.innerText = "已加载 " + loadedVideos + " 个视频，共 " + totalVideos + " 个视频。";
  638. notificationElement.style.display = 'block';
  639. setTimeout(() => {
  640. notificationElement.style.display = 'none';
  641. }, 1000); // 3秒后隐藏通知窗口
  642. }
  643. function handleScroll() {
  644. // 如果正在加载视频或者已经加载所有视频，则返回
  645. console.log('Window height:', window.innerHeight);
  646. console.log('Scroll Y:', window.scrollY);
  647. console.log('Body offset height:', document.body.offsetHeight);
  648. if (allVideosLoaded) {
  649. return;
  650. }
  651. // 检查是否滚动到页面底部
  652. if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
  653. if (currentPage * pageSize >= videoData.length) {
  654. console.log('已加载所有视频');
  655. allVideosLoaded = true;
  656. // 显示提示信息
  657. showNoMoreVideosMessage();
  658. } else {
  659. loadVideos();
  660. }
  661. }
  662. }
  663. function toggleSidebar() {
  664. const sidebar = document.getElementById('sidebar');
  665. sidebar.classList.toggle('open');
  666. }
  667. window.addEventListener('scroll', function() {
  668. handleScroll(isPC() ? pageSizePC : pageSizeMobile);
  669. });
  670. window.addEventListener('DOMContentLoaded', loadVideos);
  671. </script>
  672. </body>
  673. </html>
  674. `;
  675. }