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

under Website  Notes of Programming  tag javascript  html  css    Published on April 11th , 2020 at 10:11 pm

为了解决 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


本文由 matcha 创作,采用 知识共享署名4.0 国际许可协议进行许可,转载前请务必署名
  文章最后更新时间为:April 30th , 2020 at 08:38 am
分享到:Twitter  Weibo  Facebook