Videoplay

About

Only videos with the autoplay attribute are managed. Videoplay removes the attribute when it mounts and starts playback itself, so the browser neither downloads a video far below the fold nor plays it off screen; without JavaScript the attribute still autoplays the video. Managed videos play once enough of the video is visible and pause when it scrolls away or the page is hidden. A video the user pauses stays paused until the user plays it again. They play inline, so iPhone Safari doesn't open them full screen, and are muted for autoplay unless automute says otherwise.

When the user prefers reduced motion, the video isn't played and its controls are shown instead.

Usage

Register the component and the framework loads it the first time a page contains [data-videoplay].

import { Parallelogram } from '@parallelogram-js/core';

const app = Parallelogram.create();
app.components.add('[data-videoplay]', () => import('@parallelogram-js/core/components/Videoplay'));
app.run();

The framework is optional. Videoplay.enhanceAll() mounts the component on every matching element by itself, for a page that wants one enhancement rather than a framework:

import Videoplay from '@parallelogram-js/core/components/Videoplay';

Videoplay.enhanceAll();

It takes a selector and the component's options, and returns the instance it mounted them with. What it leaves out is what the framework adds: loading a component only on the pages that use it, mounting again after a page swap, and ordering with dependsOn.