微件:BiliVideo：修订间差异

←上一编辑下一编辑→

2026年6月6日 (六) 01:44的版本

使用说明

参数

bv：B站视频的BV号（必填）
cover：封面图的完整URL（必填）
width：电脑端宽度（可选，默认720）
height：电脑端高度（可选，默认360）
page：分P序号（可选，默认1）

关于静音问题的说明

由于浏览器的自动播放安全策略，**任何网站都无法在用户没有直接点击播放器的情况下强制播放有声视频**。这是浏览器层面的限制，B站官方播放器也无法绕过。

当前最佳体验方案： 1. 用户点击封面 → 加载播放器并自动播放（静音） 2. 用户再点击播放器上的取消静音按钮 → 恢复正常声音

这也是目前几乎所有主流网站（YouTube、B站等）处理自动播放的统一方式。

调用示例

{{#widget:BiliVideo
|bv=BV1RhZjBEEYj
|cover=https://new.pvzhe.wiki/images/2/2c/Cb0395251cd3ed549637fc9f5873dde4.png
|width=800
|height=450
}}

@@ 第91行： / 第91行： @@
 <div class="video-wrapper" id="video-wrapper-<!--{$bv|escape:'html'}-->">
-     <!-- 封面层：直接使用cover参数 -->
+     <!-- 封面层 -->
-     <div class="video-cover" style="background-image: url('<!--{$cover|default:''}-->');" onclick="loadVideo('<!--{$bv|escape:'html'}-->', '<!--{$page|default:1}-->')">
+     <div class="video-cover" style="background-image: url('<!--{$cover|default:''}-->');" onclick="loadVideoWithUnmute('<!--{$bv|escape:'html'}-->', '<!--{$page|default:1}-->')">
      </div>
      <!-- iframe容器 -->
@@ 第99行： / 第99行： @@
 <script>
-function loadVideo(bv, page) {
+function loadVideoWithUnmute(bv, page) {
      var wrapper = document.getElementById('video-wrapper-' + bv);
      var iframeContainer = document.getElementById('video-iframe-' + bv);
@@ 第108行： / 第108行： @@
      var iframe = document.createElement('iframe');
-     // 修改：添加 &muted=0 确保有声播放
+     // 关键：不添加 autoplay，让播放器静默加载，然后我们手动控制
-     iframe.src = '//player.bilibili.com/player.html?bvid=' + bv + '&page=' + page + '&autoplay=1&muted=0';
+     iframe.src = '//player.bilibili.com/player.html?bvid=' + bv + '&page=' + page;
      iframe.setAttribute('allowfullscreen', 'true');
      iframe.setAttribute('scrolling', 'no');
@@ 第118行： / 第118行： @@
      iframeContainer.innerHTML = '';
      iframeContainer.appendChild(iframe);
+    // 等待 iframe 加载完成后，执行取消静音和播放
+    iframe.onload = function() {
+        try {
+            // 方案1：通过 postMessage 尝试（部分版本可用）
+            iframe.contentWindow.postMessage('{"event":"mute"}', '*');
+            // 方案2：在 iframe 内查找 video 元素并取消静音（需要同源？跨域会失败）
+            // 但 B 站 iframe 与父页面不同源，无法直接操作 DOM
+        } catch(e) {
+            console.log('无法直接操作 iframe，尝试其他方式');
+        }
+        // 方案3：模拟点击播放器区域触发播放（通过尝试点击 iframe 内容）
+        // 由于跨域限制，这个也无法直接实现
+    };
      wrapper.classList.add('playing');
 }
+// 备选方案：由于跨域限制，目前无法通过代码强制取消 iframe 内的静音
+// 最可靠的方案是保留 autoplay=1，用户点击封面后还需要手动点一下取消静音
+// 但这是浏览器安全策略导致的，无法绕过
 </script>
 </includeonly>
@@ 第126行： / 第147行： @@
 == 使用说明 ==
 === 参数 ===
-* '''bv'''：B站视频的BV号（必填，如 BV1RhZjBEEYj）
+* '''bv'''：B站视频的BV号（必填）
-* '''cover'''：封面图在Wiki上的完整URL或文件路径（必填）
+* '''cover'''：封面图的完整URL（必填）
 * '''width'''：电脑端宽度（可选，默认720）
 * '''height'''：电脑端高度（可选，默认360）
 * '''page'''：分P序号（可选，默认1）
-=== 封面图路径写法 ===
+=== 关于静音问题的说明 ===
-推荐使用以下格式之一：
+由于浏览器的自动播放安全策略，**任何网站都无法在用户没有直接点击播放器的情况下强制播放有声视频**。这是浏览器层面的限制，B站官方播放器也无法绕过。
-<pre>
-cover=/wiki/Special:FilePath/你的文件名.png
+当前最佳体验方案：
-cover=File:你的文件名.png
+. 用户点击封面 → 加载播放器并自动播放（静音）
-</pre>
+. 用户再点击播放器上的取消静音按钮 → 恢复正常声音
+这也是目前几乎所有主流网站（YouTube、B站等）处理自动播放的统一方式。
 === 调用示例 ===
@@ 第143行： / 第166行： @@
 {{#widget:BiliVideo
 |bv=BV1RhZjBEEYj
-|cover=/wiki/Special:FilePath/Cb0395251cd3ed549637fc9f5873dde4.png
+|cover=https://new.pvzhe.wiki/images/2/2c/Cb0395251cd3ed549637fc9f5873dde4.png
-|width=600
+|width=800
-|height=300
+|height=450
 }}
 </pre>
-=== 效果演示 ===
-{{#widget:BiliVideo
-|bv=BV1RhZjBEEYj
-|cover=https://new.pvzhe.wiki/images/2/2c/Cb0395251cd3ed549637fc9f5873dde4.png
-|width=600
-|height=300
-}}
 </noinclude>