返回首頁 

🔥HTML5视频截图保存工具+带时间戳和文件名(可用于所有视频网站,百度网盘和哔哩哔哩亲测可用)

Alt+shift+D保存HTML5视频截图,并生成带时间戳和文件名的图片+并复制到剪切板(可用于所有视频网站,百度网盘和哔哩哔哩亲测可用)


Install this script?
// ==UserScript==// @name         🔥HTML5视频截图保存工具+带时间戳和文件名(可用于所有视频网站,百度网盘和哔哩哔哩亲测可用)// @namespace    http://tampermonkey.net/// @version      5.0// @description  Alt+shift+D保存HTML5视频截图,并生成带时间戳和文件名的图片+并复制到剪切板(可用于所有视频网站,百度网盘和哔哩哔哩亲测可用)// @license      Yolanda Morgan// @author       Yolanda Morgan// @match         http://*/*// @match         https://*/*// @grant        none// ==/UserScript==(function() {'use strict';/* 不起作用// 屏蔽网站自带的快捷键window.addEventListener('keydown', function(e) {e.stopPropagation();e.preventDefault();}, true);*/let disableWebsiteShortcuts = false;// 屏蔽网站自带的快捷键function disableShortcuts(e) {if (disableWebsiteShortcuts) {e.stopPropagation();e.preventDefault();}}// 监听键盘按键事件document.addEventListener('keydown', function(e) {//说明:alt+d是浏览器快捷键,ctrl+d调用ra的搜索框,d键在bilibili是字幕开关(随可在自用截图脚本中关闭,但是不能html5加强脚本中不能实现,因为不是通过监听器调用的),因此选用d键以外的键,最好为左手键,可以改成F//可用alt+ctrl+f,html5加强脚本中能用,但是在此中无论百度网盘还是bilibili都无法用// 判断是否按下了Alt、Shift和D键 -在网盘中有效,在bilibili与网站自带字幕快捷键冲突-4.0脚本已解决(随可在自用截图脚本中关闭,但是不能html5加强脚本中不能实现,因为不是通过监听器调用的)//if (e.altKey && e.shiftKey && e.key === 'D') {//判断是否按下了空格键和D键-此处在百度网盘和bilibili无效,但在html5加强脚本中有效//if (e.key === "Space" && e.key === 'D') {// 判断是否按下了Tab键和D键 -会导致bilibili翻页//  if (e.key === 'Tab' && e.key === 'D') {// 判断是否按下了Shift和D键 -在网盘中有效,在bilibili有效,但是影响大写字幕的录入//判断是否按下了Alt、shift和D键-自用截图脚本和html5加强脚本均可用if (e.altKey && e.shiftKey && e.key === 'D') {// 屏蔽网站自带的快捷键disableWebsiteShortcuts = true;// 获取页面的video元素var v = document.querySelector('video');if (v) {// 获取当前时间作为文件名的一部分var currenttime = getCurrentTime();// 创建canvas元素并绘制video元素内容var c = document.createElement('canvas');c.width = v.videoWidth;c.height = v.videoHeight;c.getContext('2d').drawImage(v, 0, 0, c.width, c.height);// 绘制后,获取图片数据并下载c.toBlob(function(b) {var u = URL.createObjectURL(b);var filename = getFilename(currenttime, v);download(u, filename);URL.revokeObjectURL(u);setClipboard(b); // 尝试复制到剪贴板}, 'image/jpg', 0.99);}// 恢复网站自带的快捷键disableWebsiteShortcuts = false;e.stopPropagation();e.preventDefault();}});// 启用或禁用网站自带的快捷键window.addEventListener('keydown', disableShortcuts, false);// 获取视频文件名function getFilename(currenttime, videoElement) {var videoNameElement = document.querySelector('div.vp-video-page-card span.is-playing.vp-video-page-card__video-name,div.frame-main div.video-title span.video-title-left'); //若第二个在前面会导致帧数识别错误//var videoNameElement = document.querySelector('div.vp-video-page-card span.is-playing.vp-video-page-card__video-name');//var videoNameElement = document.querySelectorAll('div.frame-main div.video-title span.video-title-left, div.vp-video-page-card span.is-playing.vp-video-page-card__video-name'); //无效var originalFilename = videoNameElement ? videoNameElement.innerText.trim() : '';if (!originalFilename) {var titleElement = document.querySelector('head > title');originalFilename = titleElement ? titleElement.innerText.trim() : '';}if (videoNameElement || titleElement) {originalFilename = originalFilename.replace(/\.[^.]+$/, ""); // 去掉原始文件名的后缀}//可用 var currentTimeStr = formatTime(currenttime).replace(/:/g, ''); // 将冒号删除,样式为帧_000247//可用 var currentTimeStr = formatTime(getCurrentTime(videoElement)).replace(/:/g, ''); //与上一行等同,样式为帧_000247//可用 const currentTimeStr = `${Math.floor(currenttime / 60)}'${(currenttime % 60).toFixed(0)}''`; //秒保持0位小数,样式为帧_94'37''const currentTimeStr = `${Math.floor((getCurrentTime(videoElement)) / 60)}'${((getCurrentTime(videoElement)) % 60).toFixed(0)}''`; //(getCurrentTime(videoElement))注意带有括号,否则读取时间有时候会失败,尤其是是百度组视频链接var newFilename = "BR截图_" + getCurrentDate() + "_帧_" + currentTimeStr + "_" + originalFilename + ".png"; // 根据需求拼接文件名,帧就是时间戳,BR表示browserreturn newFilename || 'screenshot';}// 获取当前完整日期时间,格式为yyyyMMddHHmmssfunction getCurrentDate() {var date = new Date();var year = date.getFullYear();var month = ('0' + (date.getMonth() + 1)).slice(-2);var day = ('0' + date.getDate()).slice(-2);var hours = ('0' + date.getHours()).slice(-2);var minutes = ('0' + date.getMinutes()).slice(-2);var seconds = ('0' + date.getSeconds()).slice(-2);return year + month + day + hours + minutes + seconds;}// 格式化时间为hh:mm:ss的格式function formatTime(time) {var hours = Math.floor(time / 3600);var minutes = Math.floor((time % 3600) / 60);var seconds = Math.floor(time % 60);return ('0' + hours).slice(-2) + ':' + ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2);}// 获取视频当前时间-可自行添加,优先级从前到后//说明:timeElements的属性来自//用于百度网盘,不能#倒顺序,否则,会导致分享页面的视频的当前时间读取为0:0:0//    document.querySelector(".vjs-current-time-display"),//用于百度网盘,//    document.querySelector(".vjs-time-tooltip"),//用于bilibili的//    document.querySelector(".bpx-player-ctrl-time-current"),//用于bilibili的//     document.querySelector(".bkplayer-current-time")//timeElements的属性还来自下面网站的属性://1.网站好看视频属性来自<span class="currentTime">00:26</span>//2.网站网站youbutey属性来自 <span class="ytp-time-current">1:49</span>//3.网站vimeo属性来自 <div class="FocusTarget_module_focusTarget__02e194b8 shared_module_focusable__63d26f6d" role="slider" aria-label="进度条" aria-valuemin="0" aria-valuemax="15.061" aria-valuenow="7" aria-valuetext="00:06 of 00:15" tabindex="0" data-progress-bar-focus-target="true"></div>//4.网站iqiyi 属性来自<div class="iqp-time-display iqp-time-cur" data-player-hook="timecur">1:49</div>//5.网站乐视属性来自<div class="hv_time"><span>05:53</span></div>//6.网站tencent属性来自<div class="txp_time_current">00:23</div>//7.网站sohu属性来自<shpspan class="x-time-current">12:32</shpspan>//8.网站sina属性来自<span class="vjs-sina-time-white">00:06</span>//9.网站nico属性来自<span class="PlayTimeFormatter PlayerPlayTime-playtime">12:35</span>//10.支持####//11.待添加//#果<div class="_ActionItem_1fux8_32 no-event grayable"><span>05:31/13:34</span></div>//快手function getCurrentTime() {var timeElements = document.querySelectorAll("[class*='current' i][class*='time' i],[class*='cur' i][class*='time' i],[class*='vjs'][class*='time'], *[class*='display'], *[class*='tooltip'], *[class*='playtime'], .hv_time span:first-child");var currentTime = null;for (var i = 0; i < timeElements.length; i++) {var timeStr = timeElements[i].textContent.trim();// 将当前时间格式化为秒数if (/^\d+:\d+$/.test(timeStr)) { // 格式为"mm:ss"var minutes = parseInt(timeStr.split(":")[0], 10);var seconds = parseInt(timeStr.split(":")[1], 10);currentTime = minutes * 60 + seconds;} else if (/^\d+:\d+:\d+$/.test(timeStr)) { // 格式为"hh:mm:ss"var hours = parseInt(timeStr.split(":")[0], 10);minutes = parseInt(timeStr.split(":")[1], 10);seconds = parseInt(timeStr.split(":")[2], 10);currentTime = hours * 3600 + minutes * 60 + seconds;}if (currentTime !== null) {break;}}return currentTime;}// 保存图片的函数。它模拟点击链接,打开保存窗口function download(href, name) {var save_link = document.createElement('a');save_link.href = href;save_link.download = name;var event = document.createEvent('MouseEvents');event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);save_link.dispatchEvent(event);}// 复制到剪切板的函数function setClipboard(blob) {navigator.clipboard.write([new ClipboardItem({'image/png': blob})]);}})();