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

<includeonly>
<style>
/* 通用视频容器 */
.video-wrapper-<!--{$id|default:'default'|escape:'html'}--> {
    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-<!--{$id|default:'default'|escape:'html'}--> {
        width: auto;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

/* 封面层 */
.video-cover-<!--{$id|default:'default'|escape:'html'}--> {
    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-<!--{$id|default:'default'|escape:'html'}-->::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-<!--{$id|default:'default'|escape:'html'}-->:hover .video-cover-<!--{$id|default:'default'|escape:'html'}-->::after {
    opacity: 1;
    background: rgba(0,0,0,0.8);
    transform: translate(-50%, -50%) scale(1.05);
}

/* iframe容器 */
.video-iframe-<!--{$id|default:'default'|escape:'html'}--> {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.video-iframe-<!--{$id|default:'default'|escape:'html'}--> iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* 播放后隐藏封面 */
.video-wrapper-<!--{$id|default:'default'|escape:'html'}-->.playing .video-cover-<!--{$id|default:'default'|escape:'html'}--> {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
</style>

<div class="video-wrapper-<!--{$id|default:'default'|escape:'html'}-->" id="video-wrapper-<!--{$id|default:'default'|escape:'html'}-->">
    <div class="video-cover-<!--{$id|default:'default'|escape:'html'}-->" style="background-image: url('<!--{$cover|default:''|escape:'html'}-->');" onclick="loadVideo_<!--{$id|default:'default'|escape:'html'}-->()">
    </div>
    <div class="video-iframe-<!--{$id|default:'default'|escape:'html'}-->" id="video-iframe-<!--{$id|default:'default'|escape:'html'}-->"></div>
</div>

<script>
function loadVideo_<!--{$id|default:'default'|escape:'html'}-->() {
    var wrapper = document.getElementById('video-wrapper-<!--{$id|default:'default'|escape:'html'}-->');
    var iframeContainer = document.getElementById('video-iframe-<!--{$id|default:'default'|escape:'html'}-->');
    
    if (wrapper.classList.contains('playing')) {
        return;
    }
    
    var iframe = document.createElement('iframe');
    iframe.src = '<!--{$url|escape:'html'}-->';
    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>
== 通用视频嵌入Widget ==
支持B站、抖音、快手、YouTube、腾讯视频、优酷、爱奇艺等平台。

=== 参数说明 ===
* '''url'''：视频嵌入地址（必填，下方表格有各平台的URL格式）
* '''cover'''：封面图URL（可选）
* '''width'''：电脑端宽度（可选，默认720）
* '''height'''：电脑端高度（可选，默认360）
* '''id'''：唯一标识符（可选，同一页面多个视频时使用）

=== 各平台嵌入URL格式 ===

{| class="wikitable"
! 平台 !! url格式示例
|-
| B站 || <code>//player.bilibili.com/player.html?bvid=BV1RhZjBEEYj&autoplay=1</code>
|-
| 抖音 || <code>//www.douyin.com/embed/7464184567890126091</code>
|-
| 快手 || <code>//www.kuaishou.com/embed/3xa4b5c6d7e8f9</code>
|-
| YouTube || <code>//www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1</code>
|-
| 腾讯视频 || <code>//v.qq.com/x/page/u3334fwn87f.html?autoplay=1</code>
|-
| 优酷 || <code>//player.youku.com/embed/XNjM5MzI1Njky?autoplay=1</code>
|-
| 爱奇艺 || <code>//open.iqiyi.com/developer/player_js/player.html?vid=19rr7q7f5g&autoplay=1</code>
|}

=== 调用示例 ===

'''抖音示例：'''
<pre>
{{#widget:Video
|url=//www.douyin.com/embed/7464184567890126091
|cover=https://example.com/douyin-cover.jpg
|width=800
|height=450
}}
</pre>

'''YouTube示例：'''
<pre>
{{#widget:Video
|url=//www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1
|cover=https://example.com/youtube-cover.jpg
}}
</pre>

</noinclude>