Last active
January 17, 2022 03:43
-
-
Save julfers/467cad9864e533a3f46380364640fdb9 to your computer and use it in GitHub Desktop.
Force native video controls
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
In full screen, force videos to use native browser controls. | |
Tested in Violentmonkey, fails in Greasemonkey 4 as of 4.11. | |
Unsurpisingly, this experiment causes sundy problems with various streaming | |
sites. Its use is *not* recommended. | |
Copyright 2022 Josiah Ulfers | |
This work is free. You can redistribute it and/or modify it under the | |
terms of the Do What The Fuck You Want To Public License, Version 2, | |
as published by Sam Hocevar. See http://www.wtfpl.net/ for more details. | |
*/ | |
// ==UserScript== | |
// @name Force native video controls | |
// @namespace http://josiahulfers.com/force-native-video-controls | |
// @version 3 | |
// @grant GM_addStyle | |
// @description Forces videos in full screen to use native controls | |
// @updateURL https://gist.githubusercontent.com/julfers/467cad9864e533a3f46380364640fdb9/raw/force-native-video-controls.user.js | |
// ==/UserScript== | |
GM_addStyle( | |
// Not available in Greasemonkey 4 as of version 4.11 and injecting styles | |
// without GM_addStyle runs afoul of content security policies | |
'.ksx-fullscreen-video:not(video) > :not(.ksx-fullscreen-video) ' | |
+ '{ display: none; }') | |
let requestFull = Element.prototype.requestFullscreen || Element.prototype.mozRequestFullScreen | |
function forceRequestFullToVideo() { | |
// Monkey patch for ``requestFullscreen`` to force the full screen element | |
// to be the video instead of some containing element. If the full screen | |
// element isn't a video, Firefox doesn't auto-hide the mouse cursor and | |
// sometimes doesn't auto-hide the controls for reasons I don't understand. | |
// | |
// Need to monkey patch instead of doing this in the onfullscreenchange handler | |
// because Firefox only lets you request full screen from a user-initiated | |
// event handler. | |
let vid = this.querySelector('video') | |
return vid ? requestFull.apply(vid) | |
: requestFull.apply(this) | |
} | |
exportFunction( | |
// https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts#exportfunction | |
forceRequestFullToVideo, Element.prototype, {defineAs: 'requestFullscreen'}) | |
;(function () { | |
var resetProps = {}, | |
video = null | |
function onFull(onfull) { | |
if (video) { | |
var fsv = Array.from(document.getElementsByClassName('ksx-fullscreen-video')) | |
for (var i = 0; i < fsv.length; i++) | |
fsv[i].classList.remove('ksx-fullscreen-video') | |
if (video) { | |
video.tabIndex = resetProps.tabIndex | |
video.controls = resetProps.controls | |
video = null | |
} | |
} | |
var fse = document.fullscreenElement | |
video = fse && fse.matches('video') ? fse : undefined | |
if (video) { | |
resetProps.tabIndex = video.tabIndex | |
resetProps.controls = video.controls | |
video.controls = false | |
video.click() | |
video.tabIndex = 0 | |
video.controls = true | |
video.focus() | |
var node = video | |
while (node.parentElement) { | |
node.classList.add('ksx-fullscreen-video') | |
node = node.parentElement | |
} | |
} | |
} | |
document.addEventListener('fullscreenchange', onFull, true) | |
})() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment