4chan WebM Auto-Resume

Resumes playback of paused WebM videos when scrolled into view

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         4chan WebM Auto-Resume
// @description  Resumes playback of paused WebM videos when scrolled into view
// @namespace    https://github.com/marktaiwan/
// @homepageURL  https://github.com/marktaiwan/4chan-Webm-Auto-Resume
// @supportURL   https://github.com/marktaiwan/4chan-Webm-Auto-Resume/issues
// @license      MIT
// @version      0.3
// @author       Marker
// @include      *//boards.4chan.org/*
// @include      *//boards.4channel.org/*
// @grant        none
// @noframe
// ==/UserScript==

(function () {
'use strict';
const interval = 100; // millisecond
let lastExecution = Date.now();

function isVisible(ele) {
  const {top, bottom} = ele.getBoundingClientRect();
  return (top > 0 || bottom > 0) && (top < document.documentElement.clientHeight);
}

function pausedByUser(video) {
  return (video.dataset.userPauseState === '1');
}

function pauseHandler(event) {
  const video = event.target;

  // Video is still in view when paused, therefore it's triggered by the user
  if (isVisible(video)) video.dataset.userPauseState = '1';
}

function playHandler(event) {
  const video = event.target;
  if (pausedByUser(video)) video.dataset.userPauseState = '0';
}

function initVideoElement(video) {
  if (video.dataset.userPauseState === undefined) {
    video.dataset.userPauseState = '0';
    video.addEventListener('pause', pauseHandler);
    video.addEventListener('play', playHandler);
  }
}

document.addEventListener('scroll', () => {
  if (Date.now() - lastExecution > interval) {
    window.setTimeout(function () {
      const expandedVideos = document.querySelectorAll('.expandedWebm');
      for (const video of expandedVideos) {
        initVideoElement(video);
        if (video.paused && isVisible(video) && !pausedByUser(video)) {
          video.play().catch(() => {/* noop */});
        }
      }
    }, interval);
    lastExecution = Date.now();
  }
});
})();