☰

HTML5视频截图器

基于HTML5的简单原生视频截图，可控制快进/逐帧/视频调速，支持自定义快捷键

How to install

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

How to install

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

Author
indefined
Daily installs
0
Total installs
6,055
Ratings
40 0 0
Version
0.4.20
Created
2018-08-01
Updated
2025-03-26
Size
45.2 KB
License
MIT
Applies to
All sites

HTML5视频截图器

脚本发布页

个人脚本仓库

问题反馈到这里

提交问题前请仔细读完说明和使用须知

功能

  • 检测网页中的HTML5视频
  • 自动将所选中视频滚动到视野中
  • HTML5视频控制(暂停/播放/速度控制/步进)
  • 视频截图(png格式原始视频画面)
  • jpg截图压缩并自动下载(适用于部分视频和浏览器)
  • 快捷键支持

功能界面

使用说明

  • 脚本启动：使用脚本管理器（目前确认Tampermonkey、Violentmonkey可用）安装脚本

    • 方法1：使用快捷键启动，默认为ctrl+alt+a，打开工具栏后可自行设置快捷键和作用范围
    • 方法2：在脚本管理器按钮上点击‘启用HTML5视频截图器’打开工具栏
    • 脚本启动 脚本启动

  • 视频识别

    • 工具栏启动会自动检测网页中存在的HTML5视频并选中第一个视频作为操作对象
    • 如页面内容变更，点击工具栏上的检测按钮可以重新检测网页中的视频
    • 如果网页中存在多个视频，从下拉框中选择需要操作的对象，被选中的视频会自动滚动到视野内

  • 视频控制：目前工具栏提供播放/暂停、视频速度、视频步进三种类型功能对视频进行操作

    • 具体功能将鼠标指针悬停在按钮上会有相应功能提示
    • 并不一定对所有视频管用，不同网页表现差异较大，具体问题请看下方问题说明

  • 截图

    • 点击截图按钮可以打开一个新窗口显示当前视频的原始画面内容，在画面上右键另存可得到png格式原始截图
    • 如果视频源和浏览器支持，点击截图右侧的↓箭头可以直接下载一张jpg格式截图，体积较小
    • 直接下载截图可能会因为视频源和浏览器拦截而失败，下载失败时和点击截图按钮等效会弹出新窗口显示截图
    • 或许你可以尝试在无法下载的网站勾选设置中的视频匿名跨域，但并不一定有效，详见下方问题说明

  • 快捷键

    • 点击工具栏下部的扩展箭头打开设置框，具体设置含义请将鼠标悬停在对应文本框或者按钮上查看提示
    • 播放器悬停快捷键默认不勾选，可能问题较多具体请看问题说明，建议针对不同网站设置

问题说明

  • 仅支持HTML5视频，不支持FLASH和其它播放插件
  • 目前无法识别嵌入在Shadow DOM中的视频（如：Chrome下的百度网盘在线视频）
  • 截图问题：
    • 截取到的图片尺寸为视频的原始大小，和当前播放器窗口大小无关，不会包含播放暂停按钮、弹幕等非视频内的内容
    • 或许你也可以拿它来截一些直播，不过适用性应该会比截普通视频差，控制按钮也不一定生效
    • 新建页面打开截图可能会被浏览器拦截，如果浏览器有弹出窗口警告需要先允许弹出窗口再重新截图
    • 直接下载截图受到浏览器跨域资源共享安全限制，如果正在播放的视频来自于第三方网站则可能被拦截导致下载失败
    • 勾选匿名跨域只能解决一部分无法下载截图网站的兼容问题，且需要刷新网页才会生效，更多情况下可能会带来副作用
    • 因此你应当只在无法下载截图的网站尝试勾选并且另存为该网站专用配置，在尝试无效时应该关闭或删除该配置
    • 另存为网站专用配置时，如果视频工具栏上的视频选择框带有0-0-1-0之类的长前缀，应当另存为带有相同前缀的网址
  • 视频控制问题：
    • 播放暂停控制可能与播放器自身播放暂停功能冲突从而无效或者表现很怪异(比如转圈遮罩层/弹幕没停止)
    • 逐帧控制会暂停视频，同上一条原因可能对有些视频无效，如果逐帧后自动播放可以尝试点击播放器自己的暂停再操作
    • 逐帧控制使用60fps帧率，实际控制可能不是逐帧的，控制时画面可能不会实时响应，特别是点太快时要等播放器缓过来
  • 截图工具栏操作问题：
    • 如果视频在播放过程中发生变更(换源或重载)脚本可能会操作失败，此时一般重新检测可以解决
    • 检测到的视频并不一定都是你能看到的，可能会有一些隐藏视频或空视频标签，自行在下拉框中寻找合适的进行操作
  • 快捷键问题：
    • 鼠标光标在截图工具栏上时作用和点击相应按钮相同，都会操作下拉框中选中的视频
    • 播放器悬停快捷键受限于悬停检测逻辑：
    • 在部分网站或播放器可能根本不会生效，因为视频上方有播放器其它外壳遮挡无法被检测到
    • 在另外一些网站可能需要在视频上来回晃动鼠标或者点击一下视频来触发检测到视频存在
    • 使用快捷键时工具栏可能并不会响应，也没有提示
    • 不启用播放器悬停快捷键时，开启截图工具栏再使用鼠标点击关闭按钮会导致快捷键全局有效（其实是BUG）

兼容性

  • 本脚本使用了较新的ES6+和HTML5 API，比较旧的浏览器版本可能不兼容
  • chrome 72 @ Tampermonkey 4.7/4.8 测试通过
  • firefox 64 @ Tampermonkey 4.8 、Violentmonkey v2.10 测试通过
  • 在启用内容安全策略的网站上只有Tampermonkey可用，且TM高级设置中注入CSP必须开启（默认启用）
  • 不兼容Greasemonkey4，原因未知，虽然做了兼容理论可用但是总之用不了也没信息可以调试
  • 大概不兼容书签、第三方浏览器原生扩展方式使用