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

为了解决 Afternoon Wiki 站，多个B站视频放一个播放器里播放并有列表可以切换的需求，折腾了几h，结合html+js+css写了个这只播放模块。

实例演示 Videos of 303SH

代码

<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: -6px;
                width: 315px;
            }

            .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>

实际应用的页面范例

http://matce.cn/wiki/doku.php/sharp/aquos_xx_mini