File size: 2,780 Bytes
5193146 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | // This script ensures that a given video or animated image is in the viewport before autoplaying it,
// then plays it. If the image is scrolled out of view, the playback stops. This applies to video
// and image types including mp4, m4v, wepb, gif, apng, etc.
import { setting_VideoPlaybackOptions } from "./SettingsManager.js";
// Note: On some browsers the user may have to explicitly allow autoplay in order for playback to work correctly
// Otherwise, you end up with a bunch of errors while scrolling informing us that the user didn't 'interact' with the page first (even if they are clearly scrolling)
export class ImageAndVideoObserverOptions {
playbackThreshold = 0.01; // Percentage of video that must be visible in order to load. Anything less and it will be unloaded.
}
let observerOptions = new ImageAndVideoObserverOptions();
const observedElements = new Set();
async function tryPlayVideo(element) {
if (element.paused) {
try {
await element.play();
element.currentTime = element.lastSeekTime;
} catch (error) {
console.error(error);
}
}
}
function tryStopVideo(element) {
if (element.readyState >= element.HAVE_ENOUGH_DATA && !element.paused) {
try {
element.pause();
} catch { }
}
}
export function observeVisualElement(element) {
if (!element) {
return;
}
// Check if the element is already being observed
if (!observedElements.has(element)) {
// If not observed, add it to the set of observed elements
observedElements.add(element);
// Start observing the element
imageAndVideoObserver.observe(element);
}
}
export function unobserveVisualElement(element) {
if (!element) {
return;
}
observedElements.delete(element);
imageAndVideoObserver.unobserve(element);
}
const imageAndVideoObserver = new IntersectionObserver((entries) => {
entries.forEach(async entry => {
const element = entry.target;
if (!element) {
unobserveVisualElement(element);
return;
}
// Check if the video is intersecting with the viewport
if (entry.isIntersecting) {
if (!element.src || element.src === '') {
element.forceLoad();
if (element.tagName !== 'VIDEO') {
unobserveVisualElement(element);
return;
}
}
if (setting_VideoPlaybackOptions.value.autoplay) {
tryPlayVideo(element);
}
} else {
if (element.tagName === 'VIDEO') {
// Pause the video if it's not intersecting with the viewport
tryStopVideo(element);
if (element.currentTime) {
element.lastSeekTime = element.currentTime;
}
if ('src' in element) {
element.removeAttribute('src'); // Unload unobserved videos
try {
if (element.load) { element.load(); } // Release memory
} catch { }
}
}
}
});
}, { threshold: observerOptions.playbackThreshold }); |