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

前言

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="pauseOrPlay" style="margin-bottom: 30px;width: 100%;height: 110px;">暂停/播放</button>

每个按钮都有一个 data-action 属性,用于定义按钮的动作。

按钮的样式通过 style 属性设置,按钮高度110px,宽度100%,且每个按钮的底部都有30px的间距。

Javascript代码

document.querySelectorAll('button[data-action]').forEach(button => {button.addEventListener('click', () => {const action = button.getAttribute('data-action');fetch(`${window.location.origin}/${action}`).then(response => response.json()).then(data => {console.log(data);}).catch(error => {alert('Error fetching data:', error);});});
});

首先代码中会选择所有带有 data-action 属性的按钮。

为每个按钮添加点击事件监听器。

点击按钮后,会获取按钮的 data-action 属性值,并发起一个fetch请求

整体的网页代码

整体的网页代码如下:

<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" /><body><button data-action="up" style="margin-bottom: 30px;width: 100%;height: 110px;">音量+</button><br><button data-action="down" style="margin-bottom: 30px;width: 100%;height: 110px;">音量-</button><br><button data-action="previous" style="margin-bottom: 30px;width: 100%;height: 110px;">上一个</button><br><button data-action="next" style="margin-bottom: 30px;width: 100%;height: 110px;">下一个</button><br><button data-action="pauseOrPlay" style="margin-bottom: 30px;width: 100%;height: 110px;">暂停/播放</button><br>
</body><script>document.querySelectorAll('button[data-action]').forEach(button => {button.addEventListener('click', () => {const action = button.getAttribute('data-action');fetch(`${window.location.origin}/${action}`).then(response => response.json()).then(data => {console.log(data);}).catch(error => {alert('Error fetching data:', error);});});});
</script></html>

预览效果

网页在手机浏览器里打开的效果如下图所示:

后端HTTP服务器实现

剩下的就是服务端了, 主要用来接受http请求, 触发不同的键盘事件即可.

整体代码

const path = require("path");
const ks = require('node-key-sender');
const express = require('express');
const app = express();
const port = 3000;const actions = {next: () => ks.sendKey('down'),previous: () => ks.sendKey('up'),up: () => ks.sendCombination(['shift', 'up']),down: () => ks.sendCombination(['shift', 'down']),pauseOrPlay: () => ks.sendKey('space')
};Object.keys(actions).forEach(action => {app.get(`/${action}`, async (req, res) => {try {await actions[action]();res.json({ success: true, message: `${action} action completed` });} catch (error) {res.status(500).json({ success: false, message: `Error performing ${action} action`, error });}});
});app.get('/', (req, res) => {res.sendFile(path.join(__dirname, 'index.html'));
});app.listen(port, () => {console.log(`Example app listening on port ${port}`);
});

代码解释

引入模块

const path = require("path");
const ks = require('node-key-sender');
const express = require('express');

node-key-sender: 这个模块用于发送模拟键盘按键事件。

express: 用于创建Web服务器的Node.js框架。

创建Express应用和设置端口

const app = express();
const port = 3000;


定义动作(Actions)对象

const actions = {next: () => ks.sendKey('down'),previous: () => ks.sendKey('up'),up: () => ks.sendCombination(['shift', 'up']),down: () => ks.sendCombination(['shift', 'down']),pauseOrPlay: () => ks.sendKey('space')
};

这里定义了五个动作,每个动作对应一个键盘事件。

创建路由

Object.keys(actions).forEach(action => {app.get(`/${action}`, async (req, res) => {try {await actions[action]();res.json({ success: true, message: `${action} action completed` });} catch (error) {res.status(500).json({ success: false, message: `Error performing ${action} action`, error });}});
});


使用 Object.keys(actions) 获取所有动作的名称,并为每个动作创建一个对应的路由。

处理请求时,调用相应的动作,并返回JSON格式的响应。

返回静态网页

app.get('/', (req, res) => {res.sendFile(path.join(__dirname, 'index.html'));
});

这个路由将根路径 (/) 的请求返回 index.html 文件。

启动服务器

app.listen(port, () => {console.log(`Example app listening on port ${port}`);
});

服务器监听指定端口(这里是3000),并在启动时输出提示信息。

添加上package.json文件

package.json文件用来描述dependencies信息

{"name": "bilibili-remote-control","version": "1.0.0","description": "Bilibili遥控器","main": "index.js","scripts": {"start": "node index.js"},"author": "","license": "MIT","dependencies": {"express": "^4.17.1","node-key-sender": "^1.0.11"}
}

运行手机遥控器

整个代码就完成了, 现在可以启动遥控器了:

装上dependencies

npm install

运行遥控器

npm run start

可以看到服务器已经启动起来了

手机浏览器里打开192.168.x.x开头的网页, 然后运行bilibili桌面版, 即可在手机里面控制bilibili的播放了, 再也不用坐在电脑屏幕跟前了.

总结

以上便是给整个bilibili手机版遥控器介绍, 相关代码已经发布到CSDN, 可以直接访问: bilibili-remote-controller:Bilibili电脑版手机遥控器 - GitCode

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/58409.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaEE初阶---网络原理之TCP篇(二)

文章目录 1.断开连接--四次挥手1.1 TCP状态1.2四次挥手的过程1.3time_wait等待1.4三次四次的总结 2.前段时间总结3.滑动窗口---传输效率机制3.1原理分析3.2丢包的处理3.3快速重传 4.流量控制---接收方安全机制4.1流量控制思路4.2剩余空间大小4.3探测包的机制 5.拥塞控制---考虑…

【C语言刷力扣】3216.交换后字典序最小的字符串

题目&#xff1a; 解题思路&#xff1a; 字典序最小的字符串&#xff1a;是指按照字母表顺序排列最前的字符串。即字符串在更靠前的位置出现比原字符串对应字符在字母表更早出现的字符。 枚举数组元素&#xff0c;尽早将较小的同奇偶的相邻字符交换。 char* getSmallestString…

Java:Map和Set练习

目录 查找字母出现的次数 只出现一次的数字 坏键盘打字 查找字母出现的次数 这道题的思路在后面的题目过程中能用到&#xff0c;所以先把这题给写出来 题目要求&#xff1a;给出一个字符串数组&#xff0c;要求输出结果为其中每个字符串及其出现次数。 思路&#xff1a;我…

【宠粉赠书】大模型项目实战:多领域智能应用开发

在当今的人工智能与自然语言处理领域&#xff0c;大型语言模型&#xff08;LLM&#xff09;凭借其强大的生成与理解能力&#xff0c;正在广泛应用于多个实际场景中。《大模型项目实战&#xff1a;多领域智能应用开发》为大家提供了全面的应用技巧和案例&#xff0c;帮助开发者深…

【商汤科技-注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

Nginx防盗链配置

1. 什么是盗链? 盗链是指服务提供商自己不提供服务的内容&#xff0c;通过技术手段绕过其它有利益的最终用户界面&#xff08;如广告&#xff09;&#xff0c;直接在自己的网站上向最终用户提供其它服务提供商的服务内容&#xff0c;骗取最终用户的浏览和点击率。受益者不提供…

Oracle+11g+笔记(8)-备份与恢复机制

Oracle11g笔记(8)-备份与恢复机制 8、备份与恢复机制 8.1 备份与恢复的方法 数据库的备份是对数据库信息的一种操作系统备份。这些信息可能是数据库的物理结构文件&#xff0c;也可能是某一部分数 据。在数据库正常运行时&#xff0c;就应该考虑到数据库可能出现故障&#…

基于Multisim的篮球比赛电子记分牌设计与仿真

一、设计任务与要求 设计一个符合篮球比赛规则的记分系统。 &#xff08;1&#xff09;有得1分、2分和3分的情况&#xff0c;电路要具有加、减分及显示的功能。 &#xff08;2&#xff09;有倒计时时钟显示&#xff0c;在“暂停时间到”和“比赛时间到”时&#xff0c;发出声光…

易友BOM管理软件

易友BOM管理软件介绍 易友BOM管理软件是一款功能齐全、操作简便、安全可靠的BOM管理系统。它为企业提供了多方面的BOM管理解决方案&#xff0c;帮助企业提高生产效率、降低成本、增强灵活性并提升竞争力。制造企业&#xff0c;都可以通过易友BOM管理软件来实现BOM管理的优化和…

【模型学习之路】手写+分析bert

手写分析bert 目录 前言 架构 embeddings Bertmodel 预训练任务 MLM NSP Bert 后话 netron可视化 code2flow可视化 fine tuning 前言 Attention is all you need! 读本文前&#xff0c;建议至少看懂【模型学习之路】手写分析Transformer-CSDN博客。 毕竟Bert是tr…

不用求人,4个方法快速恢复小米手机删除短信

手机短信作为我们日常办理事情的重要验收通道&#xff0c;往往承载着许多重要的信息。然而&#xff0c;由于各种原因&#xff0c;我们可能会不小心删除了重要的短信。那么&#xff0c;小米手机用户如何恢复这些被删除的短信呢&#xff1f;接下来&#xff0c;我们将分点为您详细…

爆肝整理14天AI工具宝藏合集(三)

&#x1f6e0;️以下是我为大家整理的AI工具宝藏合集&#xff08;三&#xff09;&#xff1a; &#x1f4a1;AI搜索 1️⃣ 天工AI搜索 2️⃣ 秘塔AI搜索 3️⃣ 夸克AI搜索 4️⃣ 开搜AI搜索 &#x1f4a1; AI视频 1️⃣ 可灵AI 2️⃣ 即梦AI 3️⃣ Vidu 4️⃣ Stable Video …

vue版本太低无法执行vue ui命令

连接 ui和create目前都只支持3.0以后得版本才能使用 https://blog.csdn.net/m0_67318913/article/details/136775252?utm_mediumdistribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-0-136775252-blog-121204604.235v43pc_blog_bottom_relevance…

ETL集成工具丨如何运用ETLCloud单步调试断点功能

在现代数据处理领域&#xff0c;ETLCloud 的单步调试断点功能正成为数据管理的重要工具。ETLCloud 是一个强大的云端数据处理平台&#xff0c;它提供了灵活的单步调试功能&#xff0c;使得用户能够逐步跟踪和分析数据处理流程。本文将探讨如何运用 ETLCloud 的单步调试断点功能…

python 模块和包、类和对象

模块 模块是包含 Python 代码的文件&#xff0c;通常用于组织相关的函数、类和其他语句。模块可以被导入并在其他 Python 文件中使用。 创建模块 假设你创建了一个名为 mymodule.py 的文件&#xff0c;内容如下&#xff1a; # mymodule.pydef greet(name): return f"…

Linux系统用户操作以及权限管理

用户账号 用户账号&#xff1a;linux系统当中用户的角色&#xff0c;以及用户所拥有的权限 超级管理员&#xff1a;root roottest1&#xff1a;~# 命令含义root表示当前的登录用户test1当前主机名~当前目录#表示当前用户时管理员$表示当前用户是普通用户 exit&#xff1a;…

全新更新!Fastreport.NET 2025.1版本发布,提升报告开发体验

在.NET 2025.1版本中&#xff0c;我们带来了巨大的期待功能&#xff0c;进一步简化了报告模板的开发过程。新功能包括通过添加链接报告页面、异步报告准备、HTML段落旋转、代码文本编辑器中的文本搜索、WebReport图像导出等&#xff0c;大幅提升用户体验。 FastReport .NET 是…

Unity(四十八):Unity与Web双向交互

效果 游戏对象绑定脚本 游戏脚本源码 using System.Collections; using System.Collections.Generic; using UnityEngine;public class Tent : MonoBehaviour {public Camera camera;// Start is called before the first frame updatevoid Start(){}// Update is called once…

Docker:容器化和虚拟化

虚拟化 虚拟化是一种资源管理技术&#xff0c;它将计算机的各种实体资源&#xff08;如CPU、内存、磁盘空间、网络适配器等&#xff09;予以抽象、转换后呈现出来&#xff0c;并可供分割、组合为一个或多个电脑配置环境。这些资源的新虚拟部分是不受现有资源的架设方式、地域或…

【果蔬识别】Python+卷积神经网络算法+深度学习+人工智能+机器学习+TensorFlow+计算机课设项目+算法模型

一、介绍 果蔬识别系统&#xff0c;本系统使用Python作为主要开发语言&#xff0c;通过收集了12种常见的水果和蔬菜&#xff08;‘土豆’, ‘圣女果’, ‘大白菜’, ‘大葱’, ‘梨’, ‘胡萝卜’, ‘芒果’, ‘苹果’, ‘西红柿’, ‘韭菜’, ‘香蕉’, ‘黄瓜’&#xff09;…