添加了几个快捷键，前进/后退间隔修改，右侧列表悬停展开
// ==UserScript==
// @name 115视频播放 快捷键
// @namespace https://greasyfork.org/zh-CN/users/1365949
// @version 0.3
// @description 添加了几个快捷键，前进/后退间隔修改，右侧列表悬停展开
// @author ewt45
// @license MIT
// @match https://v.anxia.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=anxia.com
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_registerMenuCommand
// ==/UserScript==
(function() {
'use strict';
//按键参考 https://developer.mozilla.org/zh-CN/docs/Web/API/UI_Events/Keyboard_event_key_values#navigation_keys
console.log("添加油猴脚本-115视频快捷键")
let currentTimeDiv = null;
let currentTimeDivTimeoutId = 0;
// 按键监听
document.addEventListener('keyup', keyUpListener, true);
// 右侧列表 悬停展开
const expandListBtn = document.getElementById("js_pl_control_expand")
if (expandListBtn) {
expandListBtn.addEventListener('mouseover', (e) => {expandListBtn.classList.contains('vpls-open') && expandListBtn.click()}) //仅在未打开列表时点击。
expandListBtn.parentElement.parentElement.addEventListener('mouseleave', (e) => {expandListBtn.classList.contains('vpls-close') && expandListBtn.click()}) //仅在已打开时点击
}
// 油猴插件处的设置
GM_registerMenuCommand('设置', createSettingsDialog);
/** 监听键盘按键以实现各种快捷键 */
function keyUpListener(e) {
// console.log('松开按键 ', e.key, e.keyCode)
//全屏
if (e.key.toLowerCase() === 'f') {
console.log('快捷键-全屏')
const el = document.querySelector('a[rel="fullscreen"]')
if (el) {
el.click()
//不知为何顶端的标题不会自动隐藏
setTimeout(() => {document.querySelector('[rel="full_menu"]').style.display = 'none'}, 2000)
}
}
//静音
else if (e.key.toLowerCase() === 'm') {
console.log('快捷键-静音')
const el = document.querySelector('a[rel="volume"]')
el && el.click()
}
else if (e.key.toLowerCase() === 'k' || e.key.toLowerCase() === 'l') {
const isForward = e.key.toLowerCase() === 'l'; //是否为快进
const interval = getInterval()
const video = document.querySelector("#js-video")
const playBtn = document.querySelector('[btn="play"]')
const duration = ~~(video.duration || 0)
const currentTime = ~~(video.currentTime || 0)
console.log('快捷键-'+(isForward ? "快进" : "快退"), (isForward ? "是否符合条件"+(currentTime + interval < duration) : ""))
if (!duration)
return
// if (video.paused && playBtn)
// playBtn.click()
//调整视频进度
if (isForward && (currentTime + interval < duration)) {
video.currentTime += interval;
} else if (!isForward && (currentTime - interval > 0)) {
video.currentTime -= interval;
}
//左上角显示当前进度
if (!currentTimeDiv)
addCurrentTimeDiv()
if (currentTimeDiv) {
const percent = video.currentTime / video.duration * 10000;
currentTimeDiv.innerHTML = oofUtil.date.numFormat(video.currentTime * 1000, 'hh:mm:ss') || '00:00:00' + ' (' + (~~percent)/100+'%)';
currentTimeDiv.style.display = 'block';
if (currentTimeDivTimeoutId)
clearTimeout(currentTimeDivTimeoutId);
currentTimeDivTimeoutId = setTimeout(() => {currentTimeDiv.style.display = 'none'}, 3000)
}
}
//方向键左右
//有问题，后退会转一会圈然后播放，控制台有个报错。前进无效。
else if (e.key.toLowerCase() === 'arrowleft' || e.key.toLowerCase() === 'arrowright' ) {
e.stopPropagation()
const isForward = e.key.toLowerCase() === 'arrowright'; //是否为快进
const interval = getInterval()
const video = document.querySelector("#js-video")
const playBtn = document.querySelector('[btn="play"]')
const duration = ~~(video.duration || 0)
const currentTime = ~~(video.currentTime || 0)
console.log('快捷键-'+(isForward ? "快进" : "快退"))
if (!duration)
return
// if (video.paused && playBtn)
// playBtn.click()
//调整视频进度
if (isForward && (currentTime + interval < duration)) {
video.currentTime += interval;
} else if (!isForward && (currentTime - interval > 0)) {
video.currentTime -= interval;
}
//左上角显示当前进度
if (!currentTimeDiv)
addCurrentTimeDiv()
if (currentTimeDiv) {
const percent = video.currentTime / video.duration * 10000;
currentTimeDiv.innerHTML = (oofUtil.date.numFormat(video.currentTime * 1000, 'hh:mm:ss') || '00:00:00') + ' (' + (~~percent)/100+'%)';
currentTimeDiv.style.display = 'block';
if (currentTimeDivTimeoutId)
clearTimeout(currentTimeDivTimeoutId);
currentTimeDivTimeoutId = setTimeout(() => {currentTimeDiv.style.display = 'none'}, 3000)
}
}
}
/** 显示设置弹窗 */
function createSettingsDialog() {
if (document.getElementById('sh-dialog'))
return
// 创建弹窗元素
const frame = document.createElement('div');
frame.innerHTML = `
<div id="sh-dialog" style="position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 20px; background-color: white; border: 1px solid black; z-index: 10000; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; text-align: center;">
<div style="display:table;">
<div style="display:table-cell;">前进/后退 时间间隔(秒)
</div>
<div style="display:table-cell; padding-left:20px;">
<input id="sh-interval" type="number" required/>
</div>
</div>
<div style="text-align: left; margin-top:20px">快捷键:
<br/>静音: M
<br/>前进/后退: 方向键右/左
<br/>全屏: F
</div>
<button style="margin-top:20px" id="sh-closebtn">保存</button>
</div>
`;
document.body.appendChild(frame);
document.getElementById('sh-interval').value = getInterval()
document.getElementById('sh-closebtn').addEventListener('click', function() {
setInterval(parseInt(document.getElementById('sh-interval').value))
document.body.removeChild(frame);
});
}
/** 初次启动时添加左上角的时间显示div */
const addCurrentTimeDiv = () => {
let box = document.querySelector('#js-video_box');
if (!box || currentTimeDiv)
return
const root = document.createElement('div');
root.innerHTML = '<div id="currentTimeDiv" style="position:absolute;left:20px;top:20px;font-size:14px;z-index:3;color:#fff;"></div>'
box.appendChild(root)
currentTimeDiv = document.getElementById("currentTimeDiv")
}
const setInterval = (value) => {
if (!value || value <= 0) value = 5;
GM_setValue("interval", value)
}
/** 获取前进/后退的时间间隔，默认5秒 */
const getInterval = () => {
return GM_getValue("interval", 5)
}
})();