☰

B站视频增强：缩放、旋转、拖拽

为B站视频添加缩放、旋转、拖拽移动和还原功能

作者
simayifeng
日安装量
0
总安装量
2
评分
0 0 0
版本
1.2
创建于
2025-10-01
更新于
2025-10-01
大小
9.4 KB
许可证
MIT
适用于

项目简介

  • 名称：B站视频增强：缩放、旋转、拖拽（Tampermonkey）
  • 版本：1.2
  • 作者：浮云里的浮云
  • 匹配页面：https://www.bilibili.com/video/*
  • 权限：GM_addStyle
  • 功能：在 B 站播放器底部控制栏新增缩放、旋转、拖拽与一键还原的控制。

主要特性

  • 缩放：范围 50%–200%，步进 10%，实时显示倍率（如 100%）。
  • 旋转：向左/向右每次 90°，角度实时显示（如 0°）。
  • 拖拽：按住视频区域拖动以移动画面（仅当倍率大于 100% 时启用）。
  • 还原：一键恢复到默认（倍率 100%、角度 0°、位置居中）。
  • 交互细节：平滑过渡动画、拖拽时指针显示抓取/抓紧。

安装方法

  • 安装 Tampermonkey（或兼容的用户脚本管理器）扩展。
  • 新建脚本，将完整代码粘贴并保存，确保脚本启用。
  • 打开任意 B 站视频页（https://www.bilibili.com/video/*），等待播放器加载完毕。
  • 控制栏左侧会出现自定义按钮区域，包含缩放、旋转与“还原”。

使用说明

  • 缩放：点击 + 放大、− 缩小；中间显示当前倍率。
  • 旋转：点击 ↺ 左转 90°、↻ 右转 90°；角度显示在“还原”按钮角标。
  • 拖拽：在视频区域按住并拖动以平移画面；松开鼠标停止拖动。
  • 还原：点击“还原”将画面与状态重置。

快捷键（需聚焦非输入框）

  • Ctrl + Space：切换全屏。
  • Ctrl + + / Ctrl + = / Ctrl + ↑：放大。
  • Ctrl + - / Ctrl + ↓：缩小。
  • Ctrl + L / Ctrl + ←：向左旋转 90°。
  • Ctrl + R / Ctrl + →：向右旋转 90°。
  • Ctrl + 0：还原。

实现与行为说明

  • 控件插入：作为第一个子元素插入到 .bpx-player-control-bottom-center。
  • 变换目标：对 .bpx-player-video-wrap 应用 translate/scale/rotate。
  • DOM 变化兼容：使用 MutationObserver，当播放器结构发生变动时自动尝试注入控件。
  • 拖拽逻辑：仅在倍率大于 100% 时启用拖拽，避免误操作。

常见问题

  • 看不到按钮：刷新页面或等待播放器完全初始化；确认脚本处于启用状态且匹配到正确页面。
  • 无法拖拽：保证当前缩放倍率大于 100%；确认鼠标按在视频容器中。
  • 旋转或缩放异常：点击“还原”重置后再试。

兼容性与限制

  • 适配新版 B 站网页播放器。若 B 站更新 DOM 类名（尤其是控制栏或视频容器），功能可能暂不可用。
  • 本脚本仅影响网页端呈现，不修改视频源或页面其他逻辑。

脚本头（示例） 如果需要在 Tampermonkey 中显示元信息，可在脚本顶部补充如下头部：

// ==UserScript==
// @name         B站视频增强：缩放、旋转、拖拽
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  为B站视频添加缩放、旋转、拖拽移动和还原功能
// @author       浮云里的浮云
// @match        https://www.bilibili.com/video/*
// @icon         https://www.bilibili.com/favicon.ico
// @grant        GM_addStyle
// ==/UserScript==

注意

  • 若发现样式未生效，检查选择器是否为后代选择器，例如将 .resetBtn.bili-rotate-indicator 更正为 .resetBtn .bili-rotate-indicator，将 .bpx-player-container.bpx-player-video-wrap 更正为 .bpx-player-container .bpx-player-video-wrap。

卸载

  • 在 Tampermonkey 的“已安装脚本”列表中禁用或删除即可。