这边内容主要是专门针对sakura的主题,就我当前用的这个,如果你的主题不是这个,但也有类似的情况,或许可以参考一下。我也一知半解,如有错误请务必指正。

主要是2个比较特别的部分,一个是APlayer,一个是会变化的部分。实现的效果分别是鼠标指到左下角播放器里的相关元素,他可以正常生成自定义对话;点击首页播放按钮播放视频后,再点击暂停以及再次hover播放按钮,对话内容发生改变。

这两个都没法仅通过控制面板,来自定义对话内容,前者在footer里我没看到想要抓取的对象,可能是AP自己生成的,所以抓不到?也有可能只是先后顺序的问题;后者因为变化后的内容,最初没有,所以也抓不到。

1、先处理前者,APlayer。

找到sakura-app.js,如果没折腾自定义过,先去设置-外观-sakura设置-cdn-勾选本地调用js、css文件,然后直接找到本地文件就行,在主题文件夹-sakura-js-sakura-app.js。

在812行附近,如果你改过sakura-app.js,那就搜一下,添加如下高亮内容

if (mashiro_option.float_player_on) {
    function aplayerF() {
        'use strict';
        var aplayers = [],
            loadMeting = function () {
                function a(a, b) {
                    var c = {
                        container: a,
                        audio: b,
                        mini: null,
                        fixed: null,
                        autoplay: !1,
                        mutex: !0,
                        lrcType: 3,
                        listFolded: 1,
                        preload: 'auto',
                        theme: '#2980b9',
                        loop: 'all',
                        order: 'list',
                        volume: null,
                        listMaxHeight: null,
                        customAudioType: null,
                        storageName: 'metingjs'
                    };
                    if (b.length) {
                        b[0].lrc || (c.lrcType = 0);
                        var d = {};
                        for (var e in c) {
                            var f = e.toLowerCase();
                            (a.dataset.hasOwnProperty(f) || a.dataset.hasOwnProperty(e) || null !== c[e]) && (d[e] = a.dataset[f] || a.dataset[e] || c[e], ('true' === d[e] || 'false' === d[e]) && (d[e] = 'true' == d[e]))
                        }
                        aplayers.push(new APlayer(d))
                    }
                    for (var f = 0; f < aplayers.length; f++) try {
                        aplayers[f].lrc.hide();
                    } catch (a) {
                        console.log(a)
                    }
                    //live2d交互  从这里开始就是添加的内容
                    $(".aplayer-icon-lrc").mouseenter(function () {
                        if($(".aplayer-icon-lrc-inactivity").length > 0){
                          showMessage("点击这里,可以显示歌词~", 3000);   
                         }else{
                          showMessage("点击这里,可以隐藏歌词~", 3000);   
                         }                         
                    });                                       
                    $(".aplayer-icon.aplayer-icon-play").mouseenter(function () {
                        var msgp = ["想听歌吗?",
                        "可以播放来自网易云音乐的歌曲!",
                        "悄悄告诉你,能听会员、付费、数专的歌哦,嘘!",
                        "喜欢的话,能去网易云收藏一下歌单嘛?",
                        "现在共有311首歌,还在追加中!",
                        "来听歌吧!"];
                        var p = Math.floor(Math.random()*msgp.length);
                        showMessage(msgp[p], 3000);
                    });
                    $(".aplayer-icon.aplayer-icon-menu").mouseenter(function () {
                        var msgp = ["歌单:8290035602",
                        "喜欢的话,能去网易云收藏一下歌单嘛?",
                        "现在共有311首歌,还在追加中!",
                        "欢迎大家给我推荐天依好听的歌!"];
                        var p = Math.floor(Math.random()*msgp.length);
                        showMessage(msgp[p], 3000);
                    });
                    $(".aplayer-icon-menu").click(function () {
                        if ($(".aplayer-list-hide").length > 0) {
                        showMessage("我又出来啦!゚ヽ(。◕‿◕。)ノ゚",3000);
                    } else {
                        showMessage("∑(っ°Д°;)っ耶?我被挡住了QAQ!", 3000);
                        }
                    });                                                 
                    $(".aplayer-pic").hover(function () {
                        if($(".aplayer-play").length > 0){
                           showMessage("播放", 3000);   
                        }else{
                           showMessage("暂停", 3000);   
                        }
                    });
//到这里结束
                    var lrcTag = 1;
                    $(".aplayer.aplayer-fixed").click(function () {
                        if (lrcTag == 1) {
                            for (var f = 0; f < aplayers.length; f++) try {
                                aplayers[f].lrc.show();
                            } catch (a) {
                                console.log(a)
                            }
                        }                                                
                        lrcTag = 2;
                    });
                    var apSwitchTag = 0;
                    $(".aplayer.aplayer-fixed .aplayer-body").addClass("ap-hover");
                    $(".aplayer-miniswitcher").click(function () {
                        if (apSwitchTag == 0) {
                            $(".aplayer.aplayer-fixed .aplayer-body").removeClass("ap-hover");
                            $("#secondary").addClass("active");
                            apSwitchTag = 1;
                            showMessage("展开", 3000);//这是展开播放器说的
                        } else {
                            $(".aplayer.aplayer-fixed .aplayer-body").addClass("ap-hover");
                            $("#secondary").removeClass("active");
                            apSwitchTag = 0;
                            showMessage("折叠", 3000);//这是折叠播放器说的
                        }
                    });
                }

简单说下,showMessage,就是显示对话框,前面为内容,后面显示持续时间。

if($(".aplayer-play").length > 0),用这个判断状态,比如歌词开or关,播放or暂停。

var msgp = ["1","2","3"];
var p = Math.floor(Math.random()*msgp.length);
showMessage(msgp[p], 3000); 

用这个预设多条内容,随机显示,1,2,3,就是要预设的。

2、然后播放按键

有2种方法,先说改得少的方案。还是sakura-app.js搜索“splay: function”和“ spause: function”,1300行左右,添加两次initTips();

splay: function () {
            $('#video-btn').addClass('video-pause').removeClass('video-play').show();
            $('.video-stu').css({
                "bottom": "-100px"
            });
            $('.focusinfo').css({
                "top": "-999px"
            });
            initTips();
            try {
                for (var i = 0; i < ap.length; i++) {
                    try {
                        ap[i].destroy()
                    } catch (e) {}
                }
            } catch (e) {}
            try {
                hermitInit()
            } catch (e) {}
            s.play();
        },
        spause: function () {
            $('#video-btn').addClass('video-play').removeClass('video-pause');
            $('.focusinfo').css({
                "top": "49.3%"
            });
            initTips();
            s.pause();
        },

initTips(); 重载一下,重新获取一次内容,流程大概,播放-重新获取-因为已发生变化,所以新抓到了。

好处就是懒,啥都不用动,因为默认的自定义内容, 已经写好了,就比如这些

        {
            "selector": "#video-btn.loadvideo.videolive",
            "text": [
                "坐好小板凳,演出要开始咯!",
                "精彩即将上演!",
                "视频加载中,请耐心等待!",
                "我润啦!",
                "那我先藏起来啦!",
                "不打扰你看视频啦!",
                "视频马上就来!",
                "视频马上好!马上好!"
            ]
        },
        {
            "selector": "#video-btn.haslive.video-pause.videolive",
            "text": [
                "唔。。。我好像睡着了。。。",
                "我回来啦!",
                "你的小可爱突然出现!",
                "看累了?休息一会吧!"
            ]
        },
        {
            "selector": "#video-btn.haslive.video-play",
            "text": [
                "我又润啦!",
                "我又躲起来啦!",
                "下半场开始!",
                "演出继续!",
                "这次看完嘛,让我多睡会。"                
            ]
        }

hover和click的都有,所以只需要添加两行就行,但还记得上文的第3项功能变化吗?之所以发现这个问题,就是先发现每重载一次,之后触发任何内容,对话框就多弹一次。其实现在也一样,只不过不会反复显示对话框了,在f12里还是能看见,会有很长的数组。

所以,不怕折腾,就用刚才APlayer的解决思路再来一次吧。

首先去控制面板,删除自定义里,点击播放、暂停,选择播放、暂停的相关内容,上面的是点击部分,还有下面的选择部分

        {
            "selector": "#video-btn.loadvideo.videolive",
            "text": [
                "想看看我的表演吗!",
                "有天依的精彩演出和经典PV哦!",
                "走过路过,不要错过!精彩演出,即将上演",
                "旁友,这有好康的视频,看看?",
                "目前有28个节目和1个隐藏节目哦!",
                "来看看我的视频吧!"
            ]
        },        
        {
            "selector": "#video-btn.haslive.video-play",
            "text": [
                "继续播放!",
                "休息好了吗?那我继续播放咯。",
                "再看一会吧",
                "至少把这个视频看完嘛!",
                "觉得视频好看嘛?别忘了来b站关注天依哦"
            ]
        }, 

删除后,再去js里,搜索“LV: function ()”,1354行附近,添加如下内容,原理和上面是一样的。

LV: function () {
            var _btn = $('#video-btn');
            _btn.on('click', function () {
                if ($(this).hasClass('loadvideo')) {
                    var msgp = ["坐好小板凳,演出要开始咯!",
                    "精彩即将上演!",
                    "视频加载中,请耐心等待!",
                    "我润啦!","那我先藏起来啦!",
                    "不打扰你看视频啦!",
                    "视频马上就来!",
                    "视频马上好!马上好!"];
                    var p = Math.floor(Math.random()*msgp.length);
                    showMessage(msgp[p], 5000);                    
                    $(this).addClass('video-pause').removeClass('loadvideo').hide();
                    Siren.addsource();
                    s.oncanplay = function () {
                        Siren.splay();
                        $('#video-add').show();
                        _btn.addClass('videolive').addClass('haslive');
                    }
                } else {
                    if ($(this).hasClass('video-pause')) {
                        var msgp = ["唔。。。我好像睡着了。。。",
                        "我回来啦!",
                        "你的小可爱突然出现!",
                        "看累了?休息一会吧!"];
                        var p = Math.floor(Math.random()*msgp.length);
                        showMessage(msgp[p], 5000); 
                        _btn.removeClass('videolive');
                        Siren.spause();
                        $('.video-stu').css({
                            "bottom": "0px",
                            "z-index": "5"
                        }).html('已暂停 ...');
                    } else {
                        var msgp = ["我又润啦!",
                        "我又躲起来啦!",
                        "下半场开始!",
                        "演出继续!",
                        "这次看完嘛,让我多睡会。" ];
                        var p = Math.floor(Math.random()*msgp.length);
                        showMessage(msgp[p], 5000); 
                        _btn.addClass('videolive');
                        Siren.splay();
                    }
                }    
                    s.onended = function () {
                    $('#bgvideo').attr('src', '');
                    $('#video-add').hide();
                    _btn.addClass('loadvideo').removeClass('video-pause').removeClass('videolive').removeClass('haslive');
                    $('.focusinfo').css({
                        "top": "49.3%"
                    });
                    $('#banner_wave_1').css({
                        "height": "65px"
                    });
                    $('#banner_wave_2').css({
                        "height": "80px"
                    });
                    $('.headertop-down').css({
                        "bottom":"60px"
                    });
                    $('.headertop::before').css({
                        "bottom":"0px"
                    });
                    document.styleSheets[0].deleteRule(0)
                    $('#landlord').css({
                        "bottom":"0"
                    });
                    startFalling();
                }
            });
            $("#video-btn").mouseenter(function () {
                if($(".loadvideo.videolive").length > 0){
                    var msgp = ["想看看我的表演吗!",
                    "有天依的精彩演出和经典PV哦!",
                    "走过路过,不要错过!精彩演出,即将上演",
                    "旁友,这有好康的视频,看看?",
                    "目前有28个节目和1个隐藏节目哦!",
                    "来看看我的视频吧!"];
                    var p = Math.floor(Math.random()*msgp.length);
                    showMessage(msgp[p], 5000); 
                 }else{
                    var msgp = ["继续播放!",
                    "休息好了吗?那我继续播放咯。",
                    "再看一会吧",
                    "至少把这个视频看完嘛!",
                    "觉得视频好看嘛?别忘了来b站关注天依哦"];
                    var p = Math.floor(Math.random()*msgp.length);
                    showMessage(msgp[p], 5000); 
                 }                         
            }); //选择后的对话内容
            $('#video-add').on('click', function () {
                Siren.addsource();
                document.styleSheets[0].deleteRule(0)
            });
        },

恭喜,到这一步,就可以实现全部效果啦,说到底就是把控制面板自定义里的内容,放到js里,可能有点笨,但有效!


希望你单枪匹马,活得漂亮!