Add left/right arrow hotkey to backward/forward 5 seconds for chrome's default video player. For example, videos on twitter or personal site
// ==UserScript==
// @name LeftRightArrowForVideo
// @namespace butaixianran
// @version 0.1
// @description Add left/right arrow hotkey to backward/forward 5 seconds for chrome's default video player. For example, videos on twitter or personal site
// @author butaixianran
// @homepage https://github.com/butaixianran/LeftRightArrowForVideo
// @match *://*/*
// @exclude *://*.youtube.com/*
// @exclude *://vimeo.com/*
// @exclude *://*.instagram.com/*
// @exclude *://*.bilibili.com/*
// @exclude *://*.acfun.cn/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
//Execute when the whole page has loaded
window.onload = function(){
//Bind left and right hotkey
document.onkeydown = function(e) {
//console.log("Add Left and Right hotkey to video tag");
//get all video tags
let videos = document.querySelectorAll('video');
//return if there is no video
if(!videos) {
console.log("can not find video");
return;
}
if(!videos.length) {
console.log("videos.length is 0");
return;
}
//Find first video tag in viewport area.
//For example, there gonna be a lot of videos on one twitter page,
//we only need the first video in viewport area.
//define current video
let currentVideo = null;
//for saving video position and size
let videoRect = null;
//loop on all videos
for (let video of videos) {
//get video position and size
videoRect = video.getBoundingClientRect();
//get video's left-top position and compare it to viewport size
if(videoRect.top >= 0 && videoRect.top <= window.innerHeight) {
//now, this video is the first one in viewport
currentVideo = video;
//don't need other videos
break;
}
}
let currentTime = currentVideo.currentTime;
//console.log("currentTime: " + currentTime);
//check key code
switch(e.which) {
case 37: // left
//console.log("pressed Left");
currentVideo.currentTime = ((currentTime-5)<0)?0:(currentTime-5);
break;
case 39: // right
//console.log("pressed Right");
currentVideo.currentTime = ((currentTime+5)>currentVideo.duration)?currentVideo.duration:(currentTime+5);
break;
default: return; // exit this handler for other keys
}
e.preventDefault(); // prevent the default action (scroll / move caret)
//console.log("new time: " + currentVideo.currentTime);
};
};
})();