实验室

一个发布最新功能实验/测试结果的地方,试验场在 Sandbox 沙盒区


AW多视频iframe框架Bilibili播放器 Ver 1.0

<div id="PVbox">
 
	<iframe id="PVplayer" src="" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="315px" height="177.1875" style="background: grey">
	</iframe>
 
    <div id="PVbox_TabBox" class="PVTabBox">
        <style>
        	.PVTabBox {
        		height: max-content;
        		display: flex;
        		background: whitesmoke;
        		margin-top: -20px;
        	}
 
        	.PVtab {
        		width: -webkit-fill-available;
        		display: flex;
        		padding: 10px 0;
        		justify-content: center;
        		font-size: 14px;
        		outline: none;/*不显示轮廓线*/
        		cursor: pointer;/*鼠标移入按钮范围时出现手势*/
        		background: #f5f5f5;
        		color:#656565;
        		border-style: none;
        		border-radius: 0;
        	}
 		</style>
 
 
 		<!-----------------视频按钮Tab列表 开始----------------->
        <button class="PVtab"
        onclick="TabOnClick(
        '//player.bilibili.com/player.html?aid=89589035&bvid=BV1w7411J7ez&cid=153014802&page=1'
        )"> <!-- ↑上方''内填入要设置的Bilibili视频<iframe>的src链接-->
    		▶官方宣传片</button>
 
    	<button class="PVtab"
        onclick="TabOnClick(
        '//player.bilibili.com/player.html?aid=89590166&bvid=BV1w7411J7V3&cid=153017005&page=1'
        )"> <!-- ↑上方' '内填入要设置的Bilibili视频<iframe>的src链接-->
    		▶网络广告</button>
 
    	<button class="PVtab"
        onclick="TabOnClick(
        '//player.bilibili.com/player.html?aid=89591873&bvid=BV1P7411J7Fw&cid=153018496&page=1'
        )"> <!-- ↑上方''内填入要设置的Bilibili视频<iframe>的src链接-->
    		▶要点介绍</button>
 
    	<!--↑视频超过三个?看到上面三个button按钮是不是长得很像,再复制一段<button>到</button>的代码于本列表末,相当于新建按钮
 
		↑视频不足三个?关闭多余的button按钮,只需要在需要关闭的<button>到</button>之外用/* */来包住它即可(注释掉它),
		示例:       /*<button>  代码内容  </button>*/
		-->
 
    	<!-----------------视频按钮Tab列表 结束----------------->
 
    </div>
</div>
 
<script type="text/javascript">
	var PVplayer = document.getElementById("PVplayer")
	var PVtab = document.getElementsByClassName("PVtab")
	PVtab[0].onclick(); 
	//↑默认选择第一个tab代表的视频进行播放,这句相当于模拟用户点击了第一个视频
 
	ChangeWorkingTabColor();
 
	function ChangeWorkingTabColor() { 
	//↑负责设定tab选中时的样式的function
		 for(var i = 0; i < PVtab.length; i++){
		 	ThisAID = PVtab[i].getAttribute("onclick");
		 	ThisAID = ThisAID.match(/aid=(\S*)&bvid/)[1];
		 	//↑在onclick功能(此时是字符串形式)里找视频aid码,保存给ThisAID
	 		PVplayerAID = PVplayer.src;
			PVplayerAID = PVplayerAID.match(/aid=(\S*)&bvid/)[1];
			//↑在iframe播放模块的src值里(此时是字符串形式)里找视频aid码,保存给PVplayerAID
			PVtab[i].onmouseover = function() { //tab鼠标悬停效果
	 			this.style.background="#7fcac3";
        		this.style.color="#fff";
	 		}
	 		PVtab[i].onmouseout = function() { //tab鼠标移出效果
	 			this.style.background="#f5f5f5";
        		this.style.color="#656565";
	 		}
	 		if(ThisAID == PVplayerAID){ 
	 		//↑判断当前for循环内,PVtab[i]代表的视频,是否与iframe播放模块所播放的一致,如果一致,就让tab突出显示(通过加深它的颜色来突出此时播放的视频是属于哪一个tab的)
	 			PVtab[i].style.backgroundColor='#009688';
				PVtab[i].style.color = '#fff';
				PVtab[i].onmouseover = null;
				PVtab[i].onmouseout = null;
	 		}
	 		else{ //不一致则恢复tab常规样式(未选中时的样式)
	 			PVtab[i].style.backgroundColor='#f5f5f5';
				PVtab[i].style.color = '#656565';
	 		}
	 	}
	 }
 
	//PVtab点击事件
	function TabOnClick(vSRC){
  		vSRC = deBugSRC(vSRC);
  		setPlayerSRC(vSRC);
  		ChangeWorkingTabColor();
	}
 
	//检测与修正从B站复制到的src缺少https:的BUG
	function deBugSRC(dbSRC){ 
		if(dbSRC.indexOf("https:") == -1){
		//-1代表该src链开头缺少https:
			dbSRC = "https:" + dbSRC
		}
		//alert(dbSRC);
		return dbSRC;
	}
 
	//给PVplayer设置或更换src
	function setPlayerSRC(vSRC){
  		//alert(vSRC)
  		var PVplayer = document.getElementById("PVplayer")
  		if(PVplayer.src != vSRC){
  			PVplayer.src = vSRC;
  		}
	}
</script>

命名空间默认模板页

可以使用两种模板文件:

  • _template.txt ,在当前名称空间中使用。
  • __template.txt (两个下划线),除了可以在下面的所有命名空间中使用(它们都是继承的)之外,它们还可以用作普通 _template.txt 文件 。

如果命名空间中同时存在(继承的和常规的)模板,则采用常规的模板。

插件可以通过配置管理器选择更改 _template__template 的名称。 默认分别为 c_templatei_template 。 该插件可让您选择普通的Wiki页面作为模板,以便可以通过Wiki界面对其进行编辑。

动态文字写法:

@ID@ 完整的页面 ID
@NS@ 页面的 命名空间 名称
@PAGE@ 页面名称 (不含分类名称,且下底线会被置换为空白)
@!PAGE@ 同上,但第一个字母为大写
@!!PAGE@ 同上,但每个字的第一个字母为大写
@!PAGE!@ 同上,但所有字母均为大写
@FILE@ 页面名称(不含分类名称,且下底线维持原样)
@!FILE@ 同上,但第一个字母为大写
@!FILE!@ 同上,但所有字母均为大写
@USER@ 建立这页面的使用者帐号
@NAME@ 建立这页面的使用者名称
@MAIL@ 建立这页面的使用者 E-Mail
@DATE@ 开始建立、编辑页面的日期和时间

检索页面名词跳转 · Wiki页面重定向

P.s. 很多人只熟悉诸如 605SH 这样的运营商机型号,却不熟悉其机型名 AQUOS R。为了方便萌新的检索,在保证页面地址名简洁(地址只写机型名如 aquos_r)前提下,使得搜索如 605sh 这样的运营商机型号可以出现匹配的 Wiki 页面,现给出了目前的解决方案:检索页面名词跳转 · Wiki页面重定向

【以建立 Sharp Aquos R 的页面重定向为例】

一、搜索 redirect:605sh 并新建该页面
二、在该页面内写下【如下方所示文字】
#redirect sharp:aquos_r
test
三、保存后再次搜索 redirect:605sh 并新建
四、编辑器中已有之前的输入,直接保存即可
五、直接搜索 605sh 检验是否匹配页面

在 Wiki 中插入 Bilibili 视频

一、实例

Sharp Aquos R 的官方PV


二、在wiki编辑里的写法
<html>
<iframe src="//player.bilibili.com/player.html?aid=9924843&amp;cid=16407551&amp;page=1"
scrolling="no" border="0" frameborder="no" 
framespacing="0" allowfullscreen="true" 
width="100%" height="480">
</iframe>
</html>

三、但是在信息栏中,我们需要将视频播放窗口改小,并且符合16:9的视频尺寸,从而使手机端视频略缩图不至于拉伸变形,又能实现手机端视频无缝嵌入页面的效果。实例和代码如下

Sharp Aquos R 的官方PV

基本规格
类型 参数
<WRAP right 300px>
 
Sharp Aquos R 的官方PV
 
<html>
<iframe src="//player.bilibili.com/player.html?aid=9924843&amp;cid=16407551&amp;page=1" 
scrolling="no" border="0" frameborder="no" 
framespacing="0" allowfullscreen="true" 
width="300" height="168.75">
</iframe>
</html>
 
| 基本规格 |
^ 类型 | 参数 |
 
</WRAP>

四、代码中 <iframe 到 </iframe> 片段获取方式

使用 PC 端的任意现代浏览器打开你要嵌入的 bilibili 视频的播放页,然后点击下方的分享按钮,并将“嵌入代码”右边的那段代码复制,那段代码即是 Wiki 代码中 <iframe 到 </iframe> 初始片段。

▲别忘了在 </iframe> 前加上控制宽高的代码 width=“宽度数值或百分比” height=“高度数值”。操作如图所示。