查看“︁微件:BiliVideo”︁的源代码

<includeonly>
<style>
/* 视频容器 */
.video-wrapper {
    position: relative;
    width: <!--{$width|default:720}-->px;
    height: <!--{$height|default:360}-->px;
    max-width: 100%;
    cursor: pointer;
    background-color: #000;
    overflow: hidden;
    border-radius: 8px;
}

/* 手机端自适应 */
@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-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>
    <!-- iframe容器 -->
    <div class="video-iframe" id="video-iframe-<!--{$bv|escape:'html'}-->"></div>
</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>

<noinclude>
== 使用说明 ==
=== 参数 ===
* '''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
|cover=/wiki/Special:FilePath/Cb0395251cd3ed549637fc9f5873dde4.png
|width=800
|height=450
}}
</pre>

</noinclude>