前言
不少同学会通过看视频教程来学习技术，其中最常用的工具就是360网盘了。360网盘好用是好用，但如果你不开VIP，就会限制你很多东西。其中就包括限速、倍速播放等。
在线看视频调整不了倍速，讲师的语速慢得让人抓狂。下载下来吧，又给限速了，下载个半天。下面就讲讲如何破解在线播放倍速。
正文
最简单的办法就是开通VIP，毕竟人家开发不易，pandownload警告。本篇完~~~
开个玩笑，下面进入正题。
1: 直接获取dom
修改倍速，对我们前端er不是so easy吗，鼠标移到video，获取到video dom，修改playbackRate，直接干！
image.png
什么？竟然报错了。video明明存在，但为什么是null呢？
2: shadow-dom
沿着video元素往上查找，发现一个shadow-root的玩意。
image.png
我依稀记得在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删除。一嘻嘻，这样我就创造了一个替身。
image.png
但是，随着浏览器的一波报错，宣告失败~~
image.png
4：降维打击
shadow dom是这几年才出现的，浏览器的支持度肯定不高，我很好奇如果在不支持shadow dom的浏览器中打开视频，那会是什么效果呢？一嘻嘻。查询了一下，我选择了FireFox57。可以在 这里 下载。
image.png
下载后打开视频，查看元素，可以看到已经没有shadow dom了。
image.png
此时，再拿出我们的document.getElementById('html5player_html5_api').playbackRate = 2;，啪！在控制台中运行它。倍速如愿的改变了！没有了shadow-dom，玩弄video元素还不简单，一嘻嘻。
image.png
总结
以上就是全部内容了，从中，本菜狗学到了一丢丢shadow-dom知识。
另外，我感觉FireFox57比chrome要快不少，这是错觉吗~~？？
网友评论