微件:BiliVideo - 版本历史

2026年6月6日 (六) 01:44 愤怒的郎朗

2026-06-06T01:44:50Z

←上一版本		2026年6月6日 (六) 01:44的版本
第91行：		第91行：

	<div class="video-wrapper" id="video-wrapper-<!--{$bv\|escape:'html'}-->">		<div class="video-wrapper" id="video-wrapper-<!--{$bv\|escape:'html'}-->">
	<!-- ~~封面层~~ -->		<!-- 封面层：直接使用cover参数 -->
	<div class="video-cover" style="background-image: url('<!--{$cover\|default:''}-->');" onclick="~~loadVideoWithUnmute~~('<!--{$bv\|escape:'html'}-->', '<!--{$page\|default:1}-->')">		<div class="video-cover" style="background-image: url('<!--{$cover\|default:''}-->');" onclick="loadVideo('<!--{$bv\|escape:'html'}-->', '<!--{$page\|default:1}-->')">
	</div>		</div>
	<!-- iframe容器 -->		<!-- iframe容器 -->
第99行：		第99行：

	<script>		<script>
	function ~~loadVideoWithUnmute~~(bv, page) {		function loadVideo(bv, page) {
	var wrapper = document.getElementById('video-wrapper-' + bv);		var wrapper = document.getElementById('video-wrapper-' + bv);
	var iframeContainer = document.getElementById('video-iframe-' + bv);		var iframeContainer = document.getElementById('video-iframe-' + bv);
第108行：		第108行：

	var iframe = document.createElement('iframe');		var iframe = document.createElement('iframe');
	~~// 关键：不添加 autoplay，让播放器静默加载，然后我们手动控制~~		iframe.src = '//player.bilibili.com/player.html?bvid=' + bv + '&page=' + page + '&autoplay=1';
	iframe.src = '//player.bilibili.com/player.html?bvid=' + bv + '&page=' + page;
	iframe.setAttribute('allowfullscreen', 'true');		iframe.setAttribute('allowfullscreen', 'true');
	iframe.setAttribute('scrolling', 'no');		iframe.setAttribute('scrolling', 'no');
第118行：		第117行：
	iframeContainer.innerHTML = '';		iframeContainer.innerHTML = '';
	iframeContainer.appendChild(iframe);		iframeContainer.appendChild(iframe);

	~~// 等待 iframe 加载完成后，执行取消静音和播放~~
	~~iframe.onload = function() {~~
	~~try {~~
	~~// 方案1：通过 postMessage 尝试（部分版本可用）~~
	~~iframe.contentWindow.postMessage('{"event":"mute"}', '*');~~

	~~// 方案2：在 iframe 内查找 video 元素并取消静音（需要同源？跨域会失败）~~
	~~// 但 B 站 iframe 与父页面不同源，无法直接操作 DOM~~
	~~} catch(e) {~~
	~~console.log('无法直接操作 iframe，尝试其他方式');~~
	}

	~~// 方案3：模拟点击播放器区域触发播放（通过尝试点击 iframe 内容）~~
	~~// 由于跨域限制，这个也无法直接实现~~
	};

	wrapper.classList.add('playing');		wrapper.classList.add('playing');
	}		}

	~~// 备选方案：由于跨域限制，目前无法通过代码强制取消 iframe 内的静音~~
	~~// 最可靠的方案是保留 autoplay=1，用户点击封面后还需要手动点一下取消静音~~
	~~// 但这是浏览器安全策略导致的，无法绕过~~
	</script>		</script>
	</includeonly>		</includeonly>
第147行：		第125行：
	== 使用说明 ==		== 使用说明 ==
	=== 参数 ===		=== 参数 ===
	* '''bv'''~~：B站视频的BV号（必填）~~		* '''bv'''：B站视频的BV号（必填，如 BV1RhZjBEEYj）
	* '''cover'''~~：封面图的完整URL（必填）~~		* '''cover'''：封面图在Wiki上的完整URL或文件路径（必填）
	* '''width'''：电脑端宽度（可选，默认720）		* '''width'''：电脑端宽度（可选，默认720）
	* '''height'''：电脑端高度（可选，默认360）		* '''height'''：电脑端高度（可选，默认360）
	* '''page'''：分P序号（可选，默认1）		* '''page'''：分P序号（可选，默认1）

	=== ~~关于静音问题的说明~~ ===		=== 封面图路径写法 ===
	由于浏览器的自动播放安全策略，任何网站都无法在用户没有直接点击播放器的情况下强制播放有声视频。这是浏览器层面的限制，B站官方播放器也无法绕过。		推荐使用以下格式之一：
			<pre>
	~~当前最佳体验方案：~~		cover=/wiki/Special:FilePath/你的文件名.png
	1. ~~用户点击封面 → 加载播放器并自动播放（静音）~~		cover=File:你的文件名.png
	2. ~~用户再点击播放器上的取消静音按钮 → 恢复正常声音~~		</pre>

	~~这也是目前几乎所有主流网站（YouTube、B站等）处理自动播放的统一方式。~~

	=== 调用示例 ===		=== 调用示例 ===
	<pre>		<pre>
			{{#widget:BiliVideo
			\|bv=BV1RhZjBEEYj
			\|cover=/wiki/Special:FilePath/Cb0395251cd3ed549637fc9f5873dde4.png
			\|width=600
			\|height=300
			}}
			</pre>

			=== 效果演示 ===
	{{#widget:BiliVideo		{{#widget:BiliVideo
	\|bv=BV1RhZjBEEYj		\|bv=BV1RhZjBEEYj
	\|cover=https://new.pvzhe.wiki/images/2/2c/Cb0395251cd3ed549637fc9f5873dde4.png		\|cover=https://new.pvzhe.wiki/images/2/2c/Cb0395251cd3ed549637fc9f5873dde4.png
	\|width=~~800~~		\|width=600
	\|height=~~450~~		\|height=300
	}}		}}
	~~</pre>~~
	</noinclude>		</noinclude>

2026年6月6日 (六) 01:44 愤怒的郎朗

2026-06-06T01:44:00Z

←上一版本		2026年6月6日 (六) 01:44的版本
第91行：		第91行：

	<div class="video-wrapper" id="video-wrapper-<!--{$bv\|escape:'html'}-->">		<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 class="video-cover" style="background-image: url('<!--{$cover\|default:''}-->');" onclick="loadVideoWithUnmute('<!--{$bv\|escape:'html'}-->', '<!--{$page\|default:1}-->')">
	</div>		</div>
	<!-- iframe容器 -->		<!-- iframe容器 -->
第99行：		第99行：

	<script>		<script>
	function ~~loadVideo~~(bv, page) {		function loadVideoWithUnmute(bv, page) {
	var wrapper = document.getElementById('video-wrapper-' + bv);		var wrapper = document.getElementById('video-wrapper-' + bv);
	var iframeContainer = document.getElementById('video-iframe-' + bv);		var iframeContainer = document.getElementById('video-iframe-' + bv);
第108行：		第108行：

	var iframe = document.createElement('iframe');		var iframe = document.createElement('iframe');
	// ~~修改：添加 &muted=0 确保有声播放~~		// 关键：不添加 autoplay，让播放器静默加载，然后我们手动控制
	iframe.src = '//player.bilibili.com/player.html?bvid=' + bv + '&page=' + page ~~+ '&autoplay=1&muted=0'~~;		iframe.src = '//player.bilibili.com/player.html?bvid=' + bv + '&page=' + page;
	iframe.setAttribute('allowfullscreen', 'true');		iframe.setAttribute('allowfullscreen', 'true');
	iframe.setAttribute('scrolling', 'no');		iframe.setAttribute('scrolling', 'no');
第118行：		第118行：
	iframeContainer.innerHTML = '';		iframeContainer.innerHTML = '';
	iframeContainer.appendChild(iframe);		iframeContainer.appendChild(iframe);

			// 等待 iframe 加载完成后，执行取消静音和播放
			iframe.onload = function() {
			try {
			// 方案1：通过 postMessage 尝试（部分版本可用）
			iframe.contentWindow.postMessage('{"event":"mute"}', '*');

			// 方案2：在 iframe 内查找 video 元素并取消静音（需要同源？跨域会失败）
			// 但 B 站 iframe 与父页面不同源，无法直接操作 DOM
			} catch(e) {
			console.log('无法直接操作 iframe，尝试其他方式');
			}

			// 方案3：模拟点击播放器区域触发播放（通过尝试点击 iframe 内容）
			// 由于跨域限制，这个也无法直接实现
			};

	wrapper.classList.add('playing');		wrapper.classList.add('playing');
	}		}

			// 备选方案：由于跨域限制，目前无法通过代码强制取消 iframe 内的静音
			// 最可靠的方案是保留 autoplay=1，用户点击封面后还需要手动点一下取消静音
			// 但这是浏览器安全策略导致的，无法绕过
	</script>		</script>
	</includeonly>		</includeonly>
第126行：		第147行：
	== 使用说明 ==		== 使用说明 ==
	=== 参数 ===		=== 参数 ===
	* '''bv'''~~：B站视频的BV号（必填，如 BV1RhZjBEEYj）~~		* '''bv'''：B站视频的BV号（必填）
	* '''cover'''~~：封面图在Wiki上的完整URL或文件路径（必填）~~		* '''cover'''：封面图的完整URL（必填）
	* '''width'''：电脑端宽度（可选，默认720）		* '''width'''：电脑端宽度（可选，默认720）
	* '''height'''：电脑端高度（可选，默认360）		* '''height'''：电脑端高度（可选，默认360）
	* '''page'''：分P序号（可选，默认1）		* '''page'''：分P序号（可选，默认1）

	=== ~~封面图路径写法~~ ===		=== 关于静音问题的说明 ===
	~~推荐使用以下格式之一：~~		由于浏览器的自动播放安全策略，任何网站都无法在用户没有直接点击播放器的情况下强制播放有声视频。这是浏览器层面的限制，B站官方播放器也无法绕过。
	~~<pre>~~
	~~cover=/wiki/Special:FilePath/你的文件名~~.~~png~~		当前最佳体验方案：
	~~cover=File:你的文件名~~.~~png~~		1. 用户点击封面 → 加载播放器并自动播放（静音）
	~~</pre>~~		2. 用户再点击播放器上的取消静音按钮 → 恢复正常声音

			这也是目前几乎所有主流网站（YouTube、B站等）处理自动播放的统一方式。

	=== 调用示例 ===		=== 调用示例 ===
第143行：		第166行：
	{{#widget:BiliVideo		{{#widget:BiliVideo
	\|bv=BV1RhZjBEEYj		\|bv=BV1RhZjBEEYj
	\|cover=/wiki/~~Special:FilePath~~/Cb0395251cd3ed549637fc9f5873dde4.png		\|cover=https://new.pvzhe.wiki/images/2/2c/Cb0395251cd3ed549637fc9f5873dde4.png
	\|width=~~600~~		\|width=800
	\|height=~~300~~		\|height=450
	}}		}}
	</pre>		</pre>

	~~=== 效果演示 ===~~
	~~{{#widget:BiliVideo~~
	~~\|bv=BV1RhZjBEEYj~~
	~~\|cover=https://new.pvzhe.wiki/images/2/2c/Cb0395251cd3ed549637fc9f5873dde4.png~~
	~~\|width=600~~
	~~\|height=300~~
	}}

	</noinclude>		</noinclude>

2026年6月6日 (六) 01:42 愤怒的郎朗

2026-06-06T01:42:44Z

←上一版本		2026年6月6日 (六) 01:42的版本
第108行：		第108行：

	var iframe = document.createElement('iframe');		var iframe = document.createElement('iframe');
	iframe.src = '//player.bilibili.com/player.html?bvid=' + bv + '&page=' + page + '&autoplay=1';		// 修改：添加 &muted=0 确保有声播放
			iframe.src = '//player.bilibili.com/player.html?bvid=' + bv + '&page=' + page + '&autoplay=1&muted=0';
	iframe.setAttribute('allowfullscreen', 'true');		iframe.setAttribute('allowfullscreen', 'true');
	iframe.setAttribute('scrolling', 'no');		iframe.setAttribute('scrolling', 'no');

2026年6月6日 (六) 01:40 愤怒的郎朗

2026-06-06T01:40:17Z

←上一版本		2026年6月6日 (六) 01:40的版本
第143行：		第143行：
	\|bv=BV1RhZjBEEYj		\|bv=BV1RhZjBEEYj
	\|cover=/wiki/Special:FilePath/Cb0395251cd3ed549637fc9f5873dde4.png		\|cover=/wiki/Special:FilePath/Cb0395251cd3ed549637fc9f5873dde4.png
	\|width=~~800~~		\|width=600
	\|height=~~450~~		\|height=300
	}}		}}
	</pre>		</pre>

			=== 效果演示 ===
			{{#widget:BiliVideo
			\|bv=BV1RhZjBEEYj
			\|cover=https://new.pvzhe.wiki/images/2/2c/Cb0395251cd3ed549637fc9f5873dde4.png
			\|width=600
			\|height=300
			}}

	</noinclude>		</noinclude>

愤怒的郎朗：/* 调用示例（针对您的视频） */

2026-06-06T01:22:49Z

调用示例（针对您的视频）

←上一版本		2026年6月6日 (六) 01:22的版本
第138行：		第138行：
	</pre>		</pre>

	=== ~~调用示例（针对您的视频）~~ ===		=== 调用示例 ===
	<pre>		<pre>
	{{#widget:BiliVideo		{{#widget:BiliVideo

2026年6月6日 (六) 01:22 愤怒的郎朗

2026-06-06T01:22:36Z

←上一版本		2026年6月6日 (六) 01:22的版本
第91行：		第91行：

	<div class="video-wrapper" id="video-wrapper-<!--{$bv\|escape:'html'}-->">		<div class="video-wrapper" id="video-wrapper-<!--{$bv\|escape:'html'}-->">
	<!-- ~~封面层：使用Wiki上传的图片~~ -->		<!-- 封面层：直接使用cover参数 -->
	<div class="video-cover" style="background-image: url('<!--{$~~coverurl~~\|default:''}-->');" onclick="loadVideo('<!--{$bv\|escape:'html'}-->', '<!--{$page\|default:1}-->')">		<div class="video-cover" style="background-image: url('<!--{$cover\|default:''}-->');" onclick="loadVideo('<!--{$bv\|escape:'html'}-->', '<!--{$page\|default:1}-->')">
	</div>		</div>
	<!-- iframe容器 -->		<!-- iframe容器 -->
第126行：		第126行：
	=== 参数 ===		=== 参数 ===
	* '''bv'''：B站视频的BV号（必填，如 BV1RhZjBEEYj）		* '''bv'''：B站视频的BV号（必填，如 BV1RhZjBEEYj）
	* '''cover'''~~：Wiki上的图片'''文件名'''（必填，如 "我的封面图.jpg"）~~		* '''cover'''：封面图在Wiki上的完整URL或文件路径（必填）
	* '''width'''：电脑端宽度（可选，默认720）		* '''width'''：电脑端宽度（可选，默认720）
	* '''height'''：电脑端高度（可选，默认360）		* '''height'''：电脑端高度（可选，默认360）
	* '''page'''：分P序号（可选，默认1）		* '''page'''：分P序号（可选，默认1）

	=== ~~上传封面图~~ ===		=== 封面图路径写法 ===
	~~1. 点击左侧菜单的「上传文件」~~		推荐使用以下格式之一：
	2. ~~上传您想用作封面的图片~~		<pre>
	~~3. 记住上传后的'''文件名'''（例如 "B站视频封面~~.png"）		cover=/wiki/Special:FilePath/你的文件名.png
			cover=File:你的文件名.png
			</pre>

	=== ~~调用示例~~ ===		=== 调用示例（针对您的视频） ===
	<pre>		<pre>
	{{#widget:BiliVideo		{{#widget:BiliVideo
	\|bv=BV1RhZjBEEYj		\|bv=BV1RhZjBEEYj
	\|cover=~~我的封面图~~.~~jpg~~		\|cover=/wiki/Special:FilePath/Cb0395251cd3ed549637fc9f5873dde4.png
	\|width=800		\|width=800
	\|height=450		\|height=450
	}}		}}
	~~</pre>~~

	~~=== 完整示例 ===~~
	~~<pre>~~
	~~{{#widget:BiliVideo\|bv=BV1RhZjBEEYj\|cover=Cb0395251cd3ed549637fc9f5873dde4.png}}~~
	</pre>		</pre>

	</noinclude>		</noinclude>

2026年6月6日 (六) 01:20 愤怒的郎朗

2026-06-06T01:20:18Z

显示更改

2026年6月5日 (五) 23:58 愤怒的郎朗

2026-06-05T23:58:44Z

←上一版本		2026年6月5日 (五) 23:58的版本
第1行：		第1行：
	<includeonly>		<includeonly>
	<style>		<style>
	.~~resp~~-~~video~~ {		/* 电脑端：固定尺寸 */
	~~position~~: ~~relative;~~		.video-container {
	~~padding~~-~~bottom~~: ~~56.25%~~; ~~/* 16:9 宽高比，B站视频标准比例 */~~		width: <!--{$width\|default:720}-->px;
	height: 0;		height: <!--{$height\|default:360}-->px;
	~~overflow~~: ~~hidden~~;		max-width: 100%; /* 关键：手机端自动缩小 */
	max-width: 100%;
	~~margin: 1em 0;~~
	}		}
	.~~resp~~-~~video~~ iframe {
	~~position: absolute;~~		.video-container iframe {
	~~top: 0;~~
	~~left: 0;~~
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
	~~max-width: 100%;~~
	border: 0;		border: 0;
	}		}
	</style>		</style>

	<div class="~~resp~~-~~video~~">		<div class="video-container">
	<iframe src="//player.bilibili.com/player.html?bvid=<!--{$bv\|escape:'html'}-->&page=<!--{$page\|default:1}-->~~&high_quality=1&autoplay=0~~"		<iframe src="//player.bilibili.com/player.html?bvid=<!--{$bv\|escape:'html'}-->&page=<!--{$page\|default:1}-->"
	scrolling="no"		scrolling="no"
	frameborder="no"		frameborder="no"
第33行：		第28行：
	== 使用说明 ==		== 使用说明 ==
	=== 参数 ===		=== 参数 ===
	* '''bv'''~~：B站视频的BV号（必填，如 BV1RhZjBEEYj）~~		* '''bv'''：B站视频的BV号（必填）
	* '''page'''~~：视频分P序号（可选，默认 1）~~		* '''width'''：电脑端宽度（可选，默认720）
			* '''height'''：电脑端高度（可选，默认360）
			* '''page'''：分P序号（可选，默认1）

	=== 调用示例 ===		=== 调用示例 ===
	<pre>		<pre>
	{{#widget:BiliVideo\|bv=BV1RhZjBEEYj}}		{{#widget:BiliVideo\|bv=BV1RhZjBEEYj\|width=800\|height=450}}
	</pre>		</pre>

	=== 效果预览 ===		=== 效果预览 ===
	{{#widget:BiliVideo\|bv=BV1RhZjBEEYj}}		{{#widget:BiliVideo\|bv=BV1RhZjBEEYj\|width=720\|height=360}}
	</noinclude>		</noinclude>

2026年6月5日 (五) 23:53 愤怒的郎朗

2026-06-05T23:53:19Z

←上一版本		2026年6月5日 (五) 23:53的版本
第1行：		第1行：
	<includeonly>		<includeonly>
	<div class="~~bilibili~~-video">		<style>
	<iframe src="//player.bilibili.com/player.html?bvid=<!--{$bv\|escape:'html'}-->&page=<!--{$page\|default:1}-->"		.resp-video {
			position: relative;
			padding-bottom: 56.25%; /* 16:9 宽高比，B站视频标准比例 */
			height: 0;
			overflow: hidden;
			max-width: 100%;
			margin: 1em 0;
			}
			.resp-video iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			max-width: 100%;
			border: 0;
			}
			</style>

			<div class="resp-video">
			<iframe src="//player.bilibili.com/player.html?bvid=<!--{$bv\|escape:'html'}-->&page=<!--{$page\|default:1}-->&high_quality=1&autoplay=0"
	scrolling="no"		scrolling="no"
	~~border="0"~~
	frameborder="no"		frameborder="no"
	framespacing="0"		framespacing="0"
	allowfullscreen="true"		allowfullscreen="true">
	~~width="<!--{$width\|default:720}-->"~~
	~~height="<!--{$height\|default:360}-->~~">
	</iframe>		</iframe>
	</div>		</div>
第18行：		第35行：
	* '''bv'''：B站视频的BV号（必填，如 BV1RhZjBEEYj）		* '''bv'''：B站视频的BV号（必填，如 BV1RhZjBEEYj）
	* '''page'''：视频分P序号（可选，默认 1）		* '''page'''：视频分P序号（可选，默认 1）
	* '''width'''：播放器宽度（可选，默认 720）
	* '''height'''：播放器高度（可选，默认 360）

	=== 调用示例 ===		=== 调用示例 ===
	<pre>		<pre>
	{{#widget:BiliVideo\|bv=BV1RhZjBEEYj~~\|width=720\|height=360~~}}		{{#widget:BiliVideo\|bv=BV1RhZjBEEYj}}
	</pre>		</pre>

	=== 效果预览 ===		=== 效果预览 ===
	{{#widget:BiliVideo\|bv=BV1RhZjBEEYj~~\|width=720\|height=360~~}}		{{#widget:BiliVideo\|bv=BV1RhZjBEEYj}}
	</noinclude>		</noinclude>

愤怒的郎朗：创建页面，内容为“

== 使用说明 == === 参数 === * '''bv'''…”

2026-06-05T23:50:12Z

创建页面，内容为“<includeonly> <div class="bilibili-video"> <iframe src="//player.bilibili.com/player.html?bvid=&page=" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="" height=""> </iframe> </div> </includeonly> <noinclude> == 使用说明 == === 参数 === * '''bv'''…”

新页面

<includeonly>
<div class="bilibili-video">
<iframe src="//player.bilibili.com/player.html?bvid=&page="
scrolling="no"
border="0"
frameborder="no"
framespacing="0"
allowfullscreen="true"
width=""
height="">
</iframe>
</div>
</includeonly>

<noinclude>
== 使用说明 ==
=== 参数 ===
* '''bv'''：B站视频的BV号（必填，如 BV1RhZjBEEYj）
* '''page'''：视频分P序号（可选，默认 1）
* '''width'''：播放器宽度（可选，默认 720）
* '''height'''：播放器高度（可选，默认 360）

=== 调用示例 ===
<pre>
{{#widget:BiliVideo|bv=BV1RhZjBEEYj|width=720|height=360}}
</pre>

=== 效果预览 ===
{{#widget:BiliVideo|bv=BV1RhZjBEEYj|width=720|height=360}}
</noinclude>

微件:BiliVideo - 版本历史

2026年6月6日 (六) 01:44 愤怒的郎朗

2026年6月6日 (六) 01:44 愤怒的郎朗

2026年6月6日 (六) 01:42 愤怒的郎朗

2026年6月6日 (六) 01:40 愤怒的郎朗

愤怒的郎朗：​/* 调用示例（针对您的视频） */

2026年6月6日 (六) 01:22 愤怒的郎朗

2026年6月6日 (六) 01:20 愤怒的郎朗

2026年6月5日 (五) 23:58 愤怒的郎朗

2026年6月5日 (五) 23:53 愤怒的郎朗

愤怒的郎朗：​创建页面，内容为“ == 使用说明 == === 参数 === * '''bv'''…”

愤怒的郎朗：/* 调用示例（针对您的视频） */

愤怒的郎朗：创建页面，内容为“

== 使用说明 == === 参数 === * '''bv'''…”