微件:BiliVideo：修订间差异

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

使用说明

参数

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

封面图路径写法

推荐使用以下格式之一：

cover=/wiki/Special:FilePath/你的文件名.png
cover=File:你的文件名.png

调用示例

{{#widget:BiliVideo
|bv=BV1RhZjBEEYj
|cover=/wiki/Special:FilePath/Cb0395251cd3ed549637fc9f5873dde4.png
|width=600
|height=300
}}

@@ 第1行： / 第1行： @@
 <includeonly>
 <style>
-/* 电脑端：固定尺寸 */
+/* 视频容器 */
-.video-container {
+.video-wrapper {
+    position: relative;
      width: <!--{$width|default:720}-->px;
      height: <!--{$height|default:360}-->px;
-     max-width: 100%;  /* 关键：手机端自动缩小 */
+     max-width: 100%;
+    cursor: pointer;
+    background-color: #000;
+    overflow: hidden;
+    border-radius: 8px;
 }
-.video-container iframe {
+/* 手机端自适应 */
+@media (max-width: 768px) {
+    .video-wrapper {
+        width: auto;
+        height: auto;
+        aspect-ratio: 16 / 9;
+    }
+}
+/* 封面层 */
+.video-cover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 0.3s ease;
+    z-index: 2;
+    cursor: pointer;
+}
+/* 播放按钮 */
+.video-cover::after {
+    content: "▶";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 60px;
+    height: 60px;
+    background: rgba(0,0,0,0.7);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 24px;
+    font-family: Arial, sans-serif;
+    opacity: 0.9;
+}
+.video-wrapper:hover .video-cover::after {
+    opacity: 1;
+    background: rgba(0,0,0,0.8);
+    transform: translate(-50%, -50%) scale(1.05);
+}
+/* iframe容器 */
+.video-iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+.video-iframe iframe {
      width: 100%;
      height: 100%;
      border: 0;
+}
+/* 播放后隐藏封面 */
+.video-wrapper.playing .video-cover {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
 }
 </style>
-<div class="video-container">
+<div class="video-wrapper" id="video-wrapper-<!--{$bv|escape:'html'}-->">
-<iframe src="//player.bilibili.com/player.html?bvid=<!--{$bv|escape:'html'}-->&page=<!--{$page|default:1}-->"
+    <!-- 封面层：直接使用cover参数 -->
-        scrolling="no"
+    <div class="video-cover" style="background-image: url('<!--{$cover|default:''}-->');" onclick="loadVideo('<!--{$bv|escape:'html'}-->', '<!--{$page|default:1}-->')">
-        frameborder="no"
+    </div>
-        framespacing="0"
+    <!-- iframe容器 -->
-        allowfullscreen="true">
+    <div class="video-iframe" id="video-iframe-<!--{$bv|escape:'html'}-->"></div>
-</iframe>
 </div>
+<script>
+function loadVideo(bv, page) {
+    var wrapper = document.getElementById('video-wrapper-' + bv);
+    var iframeContainer = document.getElementById('video-iframe-' + bv);
+    if (wrapper.classList.contains('playing')) {
+        return;
+    }
+    var iframe = document.createElement('iframe');
+    iframe.src = '//player.bilibili.com/player.html?bvid=' + bv + '&page=' + page + '&autoplay=1';
+    iframe.setAttribute('allowfullscreen', 'true');
+    iframe.setAttribute('scrolling', 'no');
+    iframe.style.border = '0';
+    iframe.style.width = '100%';
+    iframe.style.height = '100%';
+    iframeContainer.innerHTML = '';
+    iframeContainer.appendChild(iframe);
+    wrapper.classList.add('playing');
+}
+</script>
 </includeonly>
@@ 第28行： / 第125行： @@
 == 使用说明 ==
 === 参数 ===
-* '''bv'''：B站视频的BV号（必填）
+* '''bv'''：B站视频的BV号（必填，如 BV1RhZjBEEYj）
+* '''cover'''：封面图在Wiki上的完整URL或文件路径（必填）
 * '''width'''：电脑端宽度（可选，默认720）
 * '''height'''：电脑端高度（可选，默认360）
 * '''page'''：分P序号（可选，默认1）
+=== 封面图路径写法 ===
+推荐使用以下格式之一：
+<pre>
+cover=/wiki/Special:FilePath/你的文件名.png
+cover=File:你的文件名.png
+</pre>
 === 调用示例 ===
 <pre>
-{{#widget:BiliVideo|bv=BV1RhZjBEEYj|width=800|height=450}}
+{{#widget:BiliVideo
+|bv=BV1RhZjBEEYj
+|cover=/wiki/Special:FilePath/Cb0395251cd3ed549637fc9f5873dde4.png
+|width=600
+|height=300
+}}
 </pre>
-=== 效果预览 ===
+=== 效果演示 ===
-{{#widget:BiliVideo|bv=BV1RhZjBEEYj|width=720|height=360}}
+{{#widget:BiliVideo
+|bv=BV1RhZjBEEYj
+|cover=https://new.pvzhe.wiki/images/2/2c/Cb0395251cd3ed549637fc9f5873dde4.png
+|width=600
+|height=300
+}}
 </noinclude>