前言
不少同学会通过看视频教程来学习技术,其中最常用的工具就是网盘了。网盘好用是好用,但如果你不开VIP,就会限制你很多东西。其中就包括限速、倍速播放等。
在线看视频调整不了倍速,讲师的语速慢得让人抓狂。下载下来吧,又给限速了,下载个半天。下面就讲讲如何破解在线播放倍速。
正文
最简单的办法就是开通VIP,毕竟人家开发不易,pandownload警告。本篇完~~~
开个玩笑,下面进入正题。
1: 直接获取dom
修改倍速,对我们前端er不是so easy吗,鼠标移到video,获取到video dom,修改playbackRate,直接干!
什么?竟然报错了。video明明存在,但为什么是null呢?
2: shadow-dom
沿着video元素往上查找,发现一个shadow-root的玩意。
我依稀记得在web-component中见过这玩意。现学现卖,简单来说,Shadow DOM 是页面中一个隐藏的、独立的 DOM ,可以用它来封装一些元素的内部结构。具体大家可以去查看 文档。
其中我们看到的Shadow root是Shadow tree(Shadow DOM内部的DOM树)的根节点,并且 mode 设置了为 closed,就不可以从外部获取 Shadow DOM 了。而且,mode是只读属性,一旦创建便无法修改。在stackoverflow查询了一番,也没有找到办法。
3: 将元素copy出来
既然我JS无法获取你dom,但是在浏览器我的的确确看到了,那么我手动创建一个相同的video-root,然后把shadow-root中的全部元素copy出来。最后把原来的video-root删除。这样我就创造了一个替身。
但是,随着浏览器的一波报错,宣告失败~~
4:降维打击
shadow dom是这几年才出现的,浏览器的支持度肯定不高,我很好奇如果在不支持shadow dom的浏览器中打开视频,那会是什么效果呢?查询了一下,我选择了FireFox57。可以在 这里 下载。
下载后打开视频,查看元素,可以看到已经没有shadow dom了。
此时,再拿出我们的document.getElementById('html5player_html5_api').playbackRate = 2;
,啪!在控制台中运行它。倍速如愿的改变了!没有了shadow-dom,玩弄video元素还不简单。
总结
以上就是全部内容了,从中,本菜狗学到了一丢丢shadow-dom知识。
另外,我感觉FireFox57比chrome要快不少,这是错觉吗~~??