注册 登录 充值会员 退出
前端视频教程 小程序 众筹源码 python 商城源码 商城模板 响应式模板 中文模板 手机模板 企业源码
充值

jQuery+Dplayer.js仿哔哩哔哩视频文字弹幕代码

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2018-01-22
jQuery+Dplayer.js仿哔哩哔哩视频文字弹幕代码
一款非常好看的jQuery+Dplayer.js仿哔哩哔哩视频文字弹幕代码,jQuery网站视频弹幕特效。


js代码

<script src="js/DPlayer.min.js"></script>
<script>
    console.log(" %c 该项目基于Dplayer.js",'color:red')
    var dp = new DPlayer({
        element: document.getElementById('player1'),
        video: {
            url: 'http://oz4nlgp7a.bkt.clouddn.com/ss.mp4',
            pic: 'css/danmu.jpg'
        },
        danmaku: {
            id: 'demo',
            api: 'https://api.prprpr.me/dplayer/',
            addition: ['https://api.prprpr.me/dplayer/bilibili?aid=15572523']
        }
    });
    // 弹出框
    function alert_back(text) {
        $(".alert_back").html(text).show();
        setTimeout(function () {
            $(".alert_back").fadeOut();
        },1200)
    }
    //秒转分秒
    function formatTime(seconds) {
        return [
//            parseInt(seconds / 60 / 60),
            parseInt(seconds / 60 % 60),
            parseInt(seconds % 60)
        ]
            .join(":")
            .replace(/\b(\d)\b/g, "0$1");
    }
$.ajax({
    url:"https://api.prprpr.me/dplayer/bilibili?aid=15572523",
    success:function (data) {
        if(data.code=="1"){
            var danmaku=data.danmaku;
            var autor="农民";
            $(".danmuku_num").text(danmaku.length)
            $(danmaku).each(function (index,item) {
                if(item.type=="right"){
                }else
                {
                    autor="地主"
                }
                var oLi=`   <ol class="danmuku_list" time="${item.time}">
            <li>${formatTime(item.time)}</li>
            <li title="${item.text}">${item.text}</li>
            <li>${autor}</li>
</ol>
`
                $(".list_ovefiow").append(oLi);
                autor="农民";
            })
        }else {
            alert_back("弹幕加载失败 -v-!");
        }
        $(".danmuku_list").on("click",function () {

            dp.seek( $(this).attr("time"))
        })
    }
})
</script>