https://new.pvzhe.wiki/w/%E5%BE%AE%E4%BB%B6:Video?action=history&feed=atom 微件:Video - 版本历史 2026-06-16T09:06:00Z 本wiki上该页面的版本历史 MediaWiki 1.43.6 https://new.pvzhe.wiki/index.php?title=%E5%BE%AE%E4%BB%B6:Video&diff=3377&oldid=prev 愤怒的郎朗：​创建页面，内容为“<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'}--> {…” 2026-06-06T09:56:29Z <p>创建页面，内容为“&lt;includeonly&gt; &lt;style&gt; <span class="autocomment">通用视频容器：​</span> .video-wrapper-&lt;!--{$id|default:&#039;default&#039;|escape:&#039;html&#039;}--&gt; { position: relative; width: &lt;!--{$width|default:720}--&gt;px; height: &lt;!--{$height|default:360}--&gt;px; max-width: 100%; cursor: pointer; background-color: #000; overflow: hidden; border-radius: 8px; } <span class="autocomment">手机端自适应：​</span> @media (max-width: 768px) { .video-wrapper-&lt;!--{$id|default:&#039;default&#039;|escape:&#039;html&#039;}--&gt; {…”</p> <p><b>新页面</b></p><div>&lt;includeonly&gt;<br /> &lt;style&gt;<br /> /* 通用视频容器 */<br /> .video-wrapper-&lt;!--{$id|default:&#039;default&#039;|escape:&#039;html&#039;}--&gt; {<br /> position: relative;<br /> width: &lt;!--{$width|default:720}--&gt;px;<br /> height: &lt;!--{$height|default:360}--&gt;px;<br /> max-width: 100%;<br /> cursor: pointer;<br /> background-color: #000;<br /> overflow: hidden;<br /> border-radius: 8px;<br /> }<br /> <br /> /* 手机端自适应 */<br /> @media (max-width: 768px) {<br /> .video-wrapper-&lt;!--{$id|default:&#039;default&#039;|escape:&#039;html&#039;}--&gt; {<br /> width: auto;<br /> height: auto;<br /> aspect-ratio: 16 / 9;<br /> }<br /> }<br /> <br /> /* 封面层 */<br /> .video-cover-&lt;!--{$id|default:&#039;default&#039;|escape:&#039;html&#039;}--&gt; {<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> width: 100%;<br /> height: 100%;<br /> background-size: cover;<br /> background-position: center;<br /> background-repeat: no-repeat;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> transition: opacity 0.3s ease;<br /> z-index: 2;<br /> cursor: pointer;<br /> }<br /> <br /> /* 播放按钮 */<br /> .video-cover-&lt;!--{$id|default:&#039;default&#039;|escape:&#039;html&#039;}--&gt;::after {<br /> content: &quot;▶&quot;;<br /> position: absolute;<br /> top: 50%;<br /> left: 50%;<br /> transform: translate(-50%, -50%);<br /> width: 60px;<br /> height: 60px;<br /> background: rgba(0,0,0,0.7);<br /> border-radius: 50%;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> color: white;<br /> font-size: 24px;<br /> font-family: Arial, sans-serif;<br /> opacity: 0.9;<br /> }<br /> <br /> .video-wrapper-&lt;!--{$id|default:&#039;default&#039;|escape:&#039;html&#039;}--&gt;:hover .video-cover-&lt;!--{$id|default:&#039;default&#039;|escape:&#039;html&#039;}--&gt;::after {<br /> opacity: 1;<br /> background: rgba(0,0,0,0.8);<br /> transform: translate(-50%, -50%) scale(1.05);<br /> }<br /> <br /> /* iframe容器 */<br /> .video-iframe-&lt;!--{$id|default:&#039;default&#039;|escape:&#039;html&#039;}--&gt; {<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> width: 100%;<br /> height: 100%;<br /> z-index: 1;<br /> }<br /> <br /> .video-iframe-&lt;!--{$id|default:&#039;default&#039;|escape:&#039;html&#039;}--&gt; iframe {<br /> width: 100%;<br /> height: 100%;<br /> border: 0;<br /> }<br /> <br /> /* 播放后隐藏封面 */<br /> .video-wrapper-&lt;!--{$id|default:&#039;default&#039;|escape:&#039;html&#039;}--&gt;.playing .video-cover-&lt;!--{$id|default:&#039;default&#039;|escape:&#039;html&#039;}--&gt; {<br /> opacity: 0;<br /> visibility: hidden;<br /> pointer-events: none;<br /> }<br /> &lt;/style&gt;<br /> <br /> &lt;div class=&quot;video-wrapper-&lt;!--{$id|default:&#039;default&#039;|escape:&#039;html&#039;}--&gt;&quot; id=&quot;video-wrapper-&lt;!--{$id|default:&#039;default&#039;|escape:&#039;html&#039;}--&gt;&quot;&gt;<br /> &lt;div class=&quot;video-cover-&lt;!--{$id|default:&#039;default&#039;|escape:&#039;html&#039;}--&gt;&quot; style=&quot;background-image: url(&#039;&lt;!--{$cover|default:&#039;&#039;|escape:&#039;html&#039;}--&gt;&#039;);&quot; onclick=&quot;loadVideo_&lt;!--{$id|default:&#039;default&#039;|escape:&#039;html&#039;}--&gt;()&quot;&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;video-iframe-&lt;!--{$id|default:&#039;default&#039;|escape:&#039;html&#039;}--&gt;&quot; id=&quot;video-iframe-&lt;!--{$id|default:&#039;default&#039;|escape:&#039;html&#039;}--&gt;&quot;&gt;&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;script&gt;<br /> function loadVideo_&lt;!--{$id|default:&#039;default&#039;|escape:&#039;html&#039;}--&gt;() {<br /> var wrapper = document.getElementById(&#039;video-wrapper-&lt;!--{$id|default:&#039;default&#039;|escape:&#039;html&#039;}--&gt;&#039;);<br /> var iframeContainer = document.getElementById(&#039;video-iframe-&lt;!--{$id|default:&#039;default&#039;|escape:&#039;html&#039;}--&gt;&#039;);<br /> <br /> if (wrapper.classList.contains(&#039;playing&#039;)) {<br /> return;<br /> }<br /> <br /> var iframe = document.createElement(&#039;iframe&#039;);<br /> iframe.src = &#039;&lt;!--{$url|escape:&#039;html&#039;}--&gt;&#039;;<br /> iframe.setAttribute(&#039;allowfullscreen&#039;, &#039;true&#039;);<br /> iframe.setAttribute(&#039;scrolling&#039;, &#039;no&#039;);<br /> iframe.style.border = &#039;0&#039;;<br /> iframe.style.width = &#039;100%&#039;;<br /> iframe.style.height = &#039;100%&#039;;<br /> <br /> iframeContainer.innerHTML = &#039;&#039;;<br /> iframeContainer.appendChild(iframe);<br /> wrapper.classList.add(&#039;playing&#039;);<br /> }<br /> &lt;/script&gt;<br /> &lt;/includeonly&gt;<br /> <br /> &lt;noinclude&gt;<br /> == 通用视频嵌入Widget ==<br /> 支持B站、抖音、快手、YouTube、腾讯视频、优酷、爱奇艺等平台。<br /> <br /> === 参数说明 ===<br /> * &#039;&#039;&#039;url&#039;&#039;&#039;：视频嵌入地址（必填，下方表格有各平台的URL格式）<br /> * &#039;&#039;&#039;cover&#039;&#039;&#039;：封面图URL（可选）<br /> * &#039;&#039;&#039;width&#039;&#039;&#039;：电脑端宽度（可选，默认720）<br /> * &#039;&#039;&#039;height&#039;&#039;&#039;：电脑端高度（可选，默认360）<br /> * &#039;&#039;&#039;id&#039;&#039;&#039;：唯一标识符（可选，同一页面多个视频时使用）<br /> <br /> === 各平台嵌入URL格式 ===<br /> <br /> {| class=&quot;wikitable&quot;<br /> ! 平台 !! url格式示例<br /> |-<br /> | B站 || &lt;code&gt;//player.bilibili.com/player.html?bvid=BV1RhZjBEEYj&amp;autoplay=1&lt;/code&gt;<br /> |-<br /> | 抖音 || &lt;code&gt;//www.douyin.com/embed/7464184567890126091&lt;/code&gt;<br /> |-<br /> | 快手 || &lt;code&gt;//www.kuaishou.com/embed/3xa4b5c6d7e8f9&lt;/code&gt;<br /> |-<br /> | YouTube || &lt;code&gt;//www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&lt;/code&gt;<br /> |-<br /> | 腾讯视频 || &lt;code&gt;//v.qq.com/x/page/u3334fwn87f.html?autoplay=1&lt;/code&gt;<br /> |-<br /> | 优酷 || &lt;code&gt;//player.youku.com/embed/XNjM5MzI1Njky?autoplay=1&lt;/code&gt;<br /> |-<br /> | 爱奇艺 || &lt;code&gt;//open.iqiyi.com/developer/player_js/player.html?vid=19rr7q7f5g&amp;autoplay=1&lt;/code&gt;<br /> |}<br /> <br /> === 调用示例 ===<br /> <br /> &#039;&#039;&#039;抖音示例：&#039;&#039;&#039;<br /> &lt;pre&gt;<br /> {{#widget:Video<br /> |url=//www.douyin.com/embed/7464184567890126091<br /> |cover=https://example.com/douyin-cover.jpg<br /> |width=800<br /> |height=450<br /> }}<br /> &lt;/pre&gt;<br /> <br /> &#039;&#039;&#039;YouTube示例：&#039;&#039;&#039;<br /> &lt;pre&gt;<br /> {{#widget:Video<br /> |url=//www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1<br /> |cover=https://example.com/youtube-cover.jpg<br /> }}<br /> &lt;/pre&gt;<br /> <br /> &lt;/noinclude&gt;</div> 愤怒的郎朗