关于B站（bilibili）对未登录用户视频观看进行暂停和弹窗的分析与简单解决方案-Toy模板网

这篇具有很好参考价值的文章主要介绍了关于B站（bilibili）对未登录用户视频观看进行暂停和弹窗的分析与简单解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

情况介绍

于近日的某次更新后，B站（bilibili）网页端出现了一个新功能：当用户没有登录时，将对每个视频间隔性地（目前的情况是视频开始播放后的1分钟）进行自动暂停并弹出登录窗口。不得不说，这个功能使得使用体验极差，每个视频都要经历暂停和弹窗实在是让人不爽。有些时候，仅仅只是在B站上看几个视频，或是挂着听听歌，再者也可能试着避开大数据推送和账号的绑定。总之，登录也许不是时时刻刻必须的，而通过恶心用户、严重降低用户体验来迫使用户进行某些操作从而为在线或推广等做出贡献，也许并不是一个好主意。通过一些简单的探索和尝试，这里给出一个非常初级的分析和解决方案，供没有意愿次次登录的用户们参考。

简要分析

通过浏览器F12的网络模块，暂停弹窗事件发生的前后没有特殊的网络请求，可以初步判断出这个功能是在页面加载时引入的JS实现的，并不存在使用与远程服务器交互的内容，如使用心跳包报告用户情况并实时加载JS等，暂时没有发现。也就是说，不太能通过阻止网页向某个URL发送请求或是修改数据包内容来解决这一问题。
既然很可能是网页加载时引入的JS实现的，于是通过edge禁止部分JS加载的debug模式，排查出所属的文件。经验证，该功能存在于来自s1.hdslb.com的stardust-video.****的js文件。当禁止该js加载时，不再出现自动暂停和弹窗的情况。然而，虽然视频可以继续播放，弹幕也没有问题，但是评论区、头像、及右侧推送区的加载出现了异常。这也是可以预见的，很显然是一个压缩后的综合性JS文件，并不可能单独实现这一功能。也因此，禁止该文件的引入虽然能解决所述的问题，但仍然影响着用户的正常使用和体验。
于是想到换一下思路，如通过重写同名函数覆盖该功能。遗憾的是该文件是经过压缩混淆的生产环境文件，内容太多太杂，实现的功能较多，难以定位（例如，搜索setTimeoutset和setInterval可以得到成百上千的结果）。尝试过简单的反混淆工具，也未能得到易于解读的效果。
由于精力有限，上面几条不易走通的道路没有继续尝试了，想做一个简单的用户脚本自己凑合用吧。虽然B站使用了特殊的架构，与一般的video属性不太一致，但是模拟点击操作总是没问题的，能使得视频继续播放就是。唯一需要操心的是如何分别用户自行的暂停和被脚本进行的暂停，一个简单的方式就是判断弹窗，用户自行暂停一般不会出现弹窗，而网页进行的暂停和弹窗总是伴随出现的。

初步的解决方案

根据以上的分析，一个简单的思路就是判断视频暂停的同时是否出现了B站的登录弹窗。通过审查元素可以发现，当视频暂停时，一些模块的class会出现变化，可以利用这一点，监听该元素的属性变化。经过检查，最后发现比较适合的是一个class为bpx-player-row-dm-wrap的元素，其在暂停和播放状态切换只涉及到一个class的增加和减少（即bili-paused），比较适合监听。其他元素，如bpx-player-container，状态变化较多，有时监听会出现一些意外情况。而弹窗的元素较为好判断，会伴随着覆盖网页的mask出现。关闭弹窗和续播视频的功能直接调用click来完成，应该可以初步实现正常续播的功能。

这里使用MutationObserver来监听元素属性变化完成相关功能：

var target = document.getElementsByClassName("bpx-player-row-dm-wrap")[0];
var config = {attributes: true, attributeFilter: ["class"]};
var observer = new MutationObserver(function(motationList, observer) {
	// console.log("captured!");
	setTimeout(function(){
		if (document.getElementsByClassName("bili-mini-mask").length > 0) {
		document.getElementsByClassName("bili-mini-close-icon")[0].click();
		document.getElementsByClassName("bpx-player-ctrl-btn bpx-player-ctrl-play")[0].click();
		// observer.takeRecorders();
  		} 
	}, 1000);
});
observer.observe(target, config);