微件:BiliVideo：修订间差异

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

使用说明

参数

bv：B站视频的BV号（必填，如 BV1RhZjBEEYj）
cover：Wiki上的图片文件名（必填，如 "我的封面图.jpg"）
width：电脑端宽度（可选，默认720）
height：电脑端高度（可选，默认360）
page：分P序号（可选，默认1）

上传封面图

1. 点击左侧菜单的「上传文件」 2. 上传您想用作封面的图片 3. 记住上传后的文件名（例如 "B站视频封面.png"）

调用示例

{{#widget:BiliVideo
|bv=BV1RhZjBEEYj
|cover=我的封面图.jpg
|width=800
|height=450
}}

完整示例

{{#widget:BiliVideo|bv=BV1RhZjBEEYj|cover=Cb0395251cd3ed549637fc9f5873dde4.png}}

@@ 第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}-->"
+    <!-- 封面层：使用Wiki上传的图片 -->
-        scrolling="no"
+    <div class="video-cover" style="background-image: url('<!--{$coverurl|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上的图片'''文件名'''（必填，如 "我的封面图.jpg"）
 * '''width'''：电脑端宽度（可选，默认720）
 * '''height'''：电脑端高度（可选，默认360）
 * '''page'''：分P序号（可选，默认1）
+=== 上传封面图 ===
+. 点击左侧菜单的「上传文件」
+. 上传您想用作封面的图片
+. 记住上传后的'''文件名'''（例如 "B站视频封面.png"）
 === 调用示例 ===
 <pre>
-{{#widget:BiliVideo|bv=BV1RhZjBEEYj|width=800|height=450}}
+{{#widget:BiliVideo
+|bv=BV1RhZjBEEYj
+|cover=我的封面图.jpg
+|width=800
+|height=450
+}}
+</pre>
+=== 完整示例 ===
+<pre>
+{{#widget:BiliVideo|bv=BV1RhZjBEEYj|cover=Cb0395251cd3ed549637fc9f5873dde4.png}}
 </pre>
-=== 效果预览 ===
-{{#widget:BiliVideo|bv=BV1RhZjBEEYj|width=720|height=360}}
 </noinclude>