Twitter native video player.md

Twitter native video player

Replace the user-unfriendly Twitter video player with the browser's native video player.

This allows you to:

• seek backward/forward with the ← / → keys
• change the volume with the ↑ / ↓ keys
• switch full screen with double-click or f key
• access the video's contextual menu
• change the playback speed with the + / - and 0 keys or via the contextual menu
• share the playback speed between videos

install: https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a/raw/twitter-native-video-player.user.js

twitter-native-video-player-icon.svg

twitter-native-video-player.user.js

// ==UserScript==
// @name        Twitter native video player
// @namespace   https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a
// @match       https://twitter.com/*
// @match       https://mobile.twitter.com/*
// @grant       GM.getValue
// @grant       GM.setValue
// @version     1.0.10
// @author      yukulele
// @homepage    https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a
// @description Replace the user-unfriendly Twitter video player with the browser's native video player. This allows you to: seek backward/forward with the left/right keyboard keys, change the volume with the up/down keyboard keys, switch to full screen with double-click of f key, access the video's contextual menu, change the playback speed with the <kbd>+</kbd>, <kbd>-</kbd> and <kbd>0</kbd> keys or via the contextual menu, share the playback speed between videos.
// @icon        https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a/raw/twitter-native-video-player-icon.svg
// @downloadURL https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a/raw/twitter-native-video-player.user.js
// @updateURL   https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a/raw/twitter-native-video-player.user.js
// @supportURL  https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a#comments
// @inject-into auto
// ==/UserScript==

let timeout

async function nativePlayer(video) {
  video.playbackRate = await GM.getValue('playbackRate') ?? 1
  video.addEventListener('ratechange', () => GM.setValue('playbackRate', video.playbackRate))
  video.addEventListener('mouseenter', () => showControls(video))
  video.addEventListener('mouseleave', () => hideControls(video))
  video.addEventListener('keydown', e => keyboard(e, video))
  video.style.zIndex = 1
  video.focus()
}

function showControls(video) {
  clearTimeout(timeout)
  video.controls = true
}

function hideControls(video) {
  clearTimeout(timeout)
  timeout = setTimeout(() => video.controls = false, 1000)
}

function toggleFullscreen(video) {
  if (document.fullscreenElement) return document.exitFullscreen()
  video.requestFullscreen()
}

function keyboard(e, video) {
  if (e.key === 'f') return toggleFullscreen(video)
  if (e.key === '0' || e.code === 'Numpad0') return video.playbackRate = 1
  if (e.key === '+') return video.playbackRate += 0.05
  if (e.key === '-') return video.playbackRate -= 0.05
}

new MutationObserver(mutationsList => {
  for (var mutation of mutationsList) {
    if (mutation.type !== 'childList') continue
    for (const node of mutation.addedNodes) {
      if (!(node instanceof HTMLElement)) continue
      for (const video of node.querySelectorAll('video')) nativePlayer(video)
    }
  }
}).observe(document.documentElement, {
  childList: true,
  subtree: true,
})