给哔哩哔哩bilibili电脑版做个手机遥控器

本文链接：https://blog.csdn.net/u012416063/article/details/143189050

前言

bilibili电脑版可以在电脑屏幕上观看bilibili视频。然而，电脑版的bilibili不能通过手机控制视频翻页和调节音量，这意味着观看视频时需要一直坐在电脑旁边。那么，有没有办法制作一个手机遥控器来控制bilibili电脑版呢？

首先，bilibili电脑版支持快捷键，可以通过一些快捷键来控制视频播放。例如，按下空格键可以控制视频的播放和暂停。

既然快捷键可以控制视频，那么我们的思路就很清晰了。可以在电脑上搭建一个HTTP服务器，部署一个遥控器样式的网页，上面放置一些简单的按钮。用户打开网页后，点击这些按钮，服务器端就会模拟用户点击键盘来实现相应的操作。

前后台代码实现

说干就干, 开始动手实现这个手机版bilibili遥控器, 语言方面我们选择使用NodeJS来搭建我们的服务器, 先写前端UI:

整体的网页框架

<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<body>
    ...
</body>
<script>
    ...
</script>
</html>

<meta charset="utf-8">: 指定文档的字符编码为UTF-8。
<meta name="viewport" content="width=device-width, initial-scale=1" />: 使页面在移动设备上适应屏幕宽度，并初始缩放比例为1。

遥控器的按钮:

<button data-action="up" style="margin-bottom: 30px;width: 100%;height: 110px;">音量+</button>
<button data-action="down" style="margin-bottom: 30px;width: 100%;height: 110px;">音量-</button>
<button data-action="previous" style="margin-bottom: 30px;width: 100%;height: 110px;">上一个</button>
<button data-action="next" style="margin-bottom: 30px;width: 100%;height: 110px;">下一个</button>
<button data-action="pause