{"id":238,"date":"2026-04-07T00:38:53","date_gmt":"2026-04-06T16:38:53","guid":{"rendered":"https:\/\/www.45446tools.com\/?page_id=238"},"modified":"2026-04-07T11:51:52","modified_gmt":"2026-04-07T03:51:52","slug":"%e6%88%91%e7%9a%84%e8%af%be%e7%a8%8b","status":"publish","type":"page","link":"https:\/\/www.45446tools.com\/index.php\/%e6%88%91%e7%9a%84%e8%af%be%e7%a8%8b\/","title":{"rendered":"\u6211\u7684\u8bfe\u7a0b"},"content":{"rendered":"\n<!-- B\u7ad9\u64ad\u653e\u5217\u8868 - \u81ea\u52a8\u5207\u96c6+\u9ed8\u8ba4\u5173\u5f39\u5e55+\u5f00\u5c40\u4e0d\u81ea\u52a8\u64ad\u653e -->\n<style>\n.bilibili-playlist{margin:20px 0;}\n.bilibili-player{margin-bottom:10px;}\n.bilibili-list{\n  display:flex; flex-direction:column; gap:8px;\n}\n.bilibili-item{\n  padding:10px 14px; background:#f5f5f5; border-radius:6px;\n  cursor:pointer; transition:0.2s;\n}\n.bilibili-item.active{\n  background:#fb7299; color:#fff;\n}\n.bilibili-item:hover{\n  background:#eee;\n}\n.bilibili-controls{\n  margin:10px 0; display:flex; gap:10px;\n}\n.bilibili-controls button{\n  padding:6px 12px; cursor:pointer;\n}\n<\/style>\n\n<div class=\"bilibili-playlist\">\n  <!-- \u64ad\u653e\u5668 -->\n  <div class=\"bilibili-player\">\n    <iframe id=\"bilibili-frame\" \n      style=\"width:100%; aspect-ratio:16\/9;\"\n      src=\"\"\n      scrolling=\"no\" frameborder=\"0\" allowfullscreen>\n    <\/iframe>\n  <\/div>\n\n  <!-- \u63a7\u5236\u6309\u94ae -->\n  <div class=\"bilibili-controls\">\n    <button id=\"prev\">\u4e0a\u4e00\u96c6<\/button>\n    <button id=\"next\">\u4e0b\u4e00\u96c6<\/button>\n    <button id=\"toggle-loop\">\u5217\u8868\u5faa\u73af\uff1a\u5f00\u542f<\/button>\n  <\/div>\n\n  <!-- \u64ad\u653e\u5217\u8868 -->\n  <div class=\"bilibili-list\" id=\"playlist\">\n    <!-- \u81ea\u884c\u66ff\u6362BV\u548c\u6807\u9898 -->\n    <div class=\"bilibili-item\" data-bv=\"BV1Vy4y1u7sX\">1.\u5bfc\u8d2d\u5458\u57f9\u8bad-\u670d\u52a1\u4e3b\u52a8\u6027<\/div>\n    <div class=\"bilibili-item\" data-bv=\"BV1P64y197GG\">2.\u5458\u5de5\u5e94\u5177\u5907\u7684\u7d20\u8d28\u4e0e\u5fc3\u6001<\/div>\n    <div class=\"bilibili-item\" data-bv=\"BV1UM4y1M7MB\">3.\u670d\u52a1\u5458\u6280\u80fd-\u670d\u52a1\u610f\u8bc6\u4e0e\u5982\u4f55\u4e3a\u987e\u5ba2\u670d\u52a1\n<\/div>\n    <div class=\"bilibili-item\" data-bv=\"BV1pf4y1N7o8\">4.\u5bfc\u8d2d\u5458\u9500\u552e\u6280\u80fd\u57f9\u8bad-FAB\u5e94\u7528<\/div>\n\n\n  <\/div>\n<\/div>\n\n<script>\n\/\/ \u914d\u7f6e\nlet loopEnabled = true;\nlet currentIndex = 0;\nlet totalTime = 0;\nlet endTimer = null;\n\nconst frame = document.getElementById('bilibili-frame');\nconst items = Array.from(document.querySelectorAll('.bilibili-item'));\nconst loopBtn = document.getElementById('toggle-loop');\n\n\/\/ \u52a0\u8f7d\u89c6\u9891\uff1a\u5173\u5f39\u5e55+\u4e0d\u81ea\u52a8\u64ad\u653e\nfunction loadVideo(index) {\n  if (!items[index]) return;\n  currentIndex = index;\n  const bv = items[index].dataset.bv;\n\n  items.forEach((it, i) => {\n    it.classList.toggle('active', i === index);\n  });\n\n  \/\/ danmaku=0 \u9ed8\u8ba4\u5173\u5f39\u5e55\uff0cautoplay=0 \u5f00\u5c40\u4e0d\u81ea\u52a8\u64ad\n  const url = `\/\/player.bilibili.com\/player.html?isOutside=true&bvid=${bv}&autoplay=0&danmaku=0`;\n  frame.src = url;\n\n  \/\/ \u6e05\u7a7a\u65e7\u8ba1\u65f6\u5668\n  if(endTimer) clearTimeout(endTimer);\n  totalTime = 0;\n}\n\n\/\/ \u4e0b\u4e00\u96c6\nfunction nextVideo() {\n  let next = currentIndex + 1;\n  if (next >= items.length) {\n    if (!loopEnabled) return;\n    next = 0;\n  }\n  loadVideo(next);\n}\n\n\/\/ \u4e0a\u4e00\u96c6\nfunction prevVideo() {\n  let prev = currentIndex - 1;\n  if (prev < 0) {\n    if (!loopEnabled) return;\n    prev = items.length - 1;\n  }\n  loadVideo(prev);\n}\n\n\/\/ \u70b9\u51fb\u5217\u8868\u5207\u6362\nitems.forEach((item, idx) => {\n  item.addEventListener('click', () => loadVideo(idx));\n});\n\n\/\/ \u6309\u94ae\u4e8b\u4ef6\ndocument.getElementById('next').onclick = nextVideo;\ndocument.getElementById('prev').onclick = prevVideo;\nloopBtn.onclick = () => {\n  loopEnabled = !loopEnabled;\n  loopBtn.innerText = '\u5217\u8868\u5faa\u73af\uff1a' + (loopEnabled ? '\u5f00\u542f' : '\u5173\u95ed');\n};\n\n\/\/ \u515c\u5e95\uff1a\u9760\u65f6\u957f\u9884\u5224\u81ea\u52a8\u5207\u96c6\uff08\u89e3\u51b3iframe\u8de8\u57df\u76d1\u542c\u5931\u6548\uff09\nfunction startAutoNext() {\n  \/\/ \u5148\u7b49\u64ad\u653e\u5668\u52a0\u8f7d\u5b8c\u6210\n  setTimeout(() => {\n    try {\n      const win = frame.contentWindow;\n      if(!win) return;\n      \/\/ \u53d6\u89c6\u9891\u603b\u65f6\u957f\n      let dur = win.document.querySelector('video')?.duration || 0;\n      if(dur > 10){\n        \/\/ \u5269\u4f592\u79d2\u89e6\u53d1\u4e0b\u4e00\u96c6\n        endTimer = setTimeout(()=>{\n          nextVideo();\n        }, (dur - 2) * 1000);\n      }\n    }catch(e){}\n  }, 2000);\n}\n\n\/\/ \u52ab\u6301\u52a0\u8f7d\uff0c\u6bcf\u6b21\u6362\u89c6\u9891\u90fd\u542f\u52a8\u515c\u5e95\u8ba1\u65f6\nconst oldLoad = loadVideo;\nloadVideo = function(i){\n  oldLoad(i);\n  startAutoNext();\n};\n\n\/\/ \u9ed8\u8ba4\u52a0\u8f7d\u7b2c\u4e00\u4e2a\u89c6\u9891\nloadVideo(0);\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4e0a\u4e00\u96c6 \u4e0b\u4e00\u96c6 \u5217\u8868\u5faa\u73af\uff1a\u5f00\u542f 1.\u5bfc\u8d2d\u5458\u57f9\u8bad-\u670d\u52a1\u4e3b\u52a8\u6027 2.\u5458\u5de5\u5e94\u5177\u5907\u7684\u7d20\u8d28\u4e0e\u5fc3\u6001 3.\u670d\u52a1\u5458\u6280\u80fd-\u670d\u52a1\u610f\u8bc6\u4e0e\u5982\u4f55\u4e3a\u987e\u5ba2\u670d\u52a1  &#8230;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ngg_post_thumbnail":0,"footnotes":""},"class_list":["post-238","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.45446tools.com\/index.php\/wp-json\/wp\/v2\/pages\/238","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.45446tools.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.45446tools.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.45446tools.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.45446tools.com\/index.php\/wp-json\/wp\/v2\/comments?post=238"}],"version-history":[{"count":4,"href":"https:\/\/www.45446tools.com\/index.php\/wp-json\/wp\/v2\/pages\/238\/revisions"}],"predecessor-version":[{"id":266,"href":"https:\/\/www.45446tools.com\/index.php\/wp-json\/wp\/v2\/pages\/238\/revisions\/266"}],"wp:attachment":[{"href":"https:\/\/www.45446tools.com\/index.php\/wp-json\/wp\/v2\/media?parent=238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}