StringVideoAutoplay Module

Auto-play inline videos the moment they scroll into view, and pause them once they leave. StringVideoAutoplay handles muted playback, inline flags, and loop wiring so you can focus on choreography.

Activation primer: Add string="autoplay" to every <video> you want StringVideoAutoplay to manage. Supply string-id="your-id" when you need a stable handle for events, mirrors, or string-copy-from; otherwise StringTune generates one automatically.

HTML Attributes

Module Snapshot

• Activation attribute: string="autoplay"
• Auto-config: forces muted, playsinline, loop, autoplay, and calls load() before the first play attempt
• Scroll gating: hooks into enter/leave events from the base module to start and pause playback
• Promise-safe: catches video.play() rejections and logs a warning (useful for autoplay restrictions during dev)
• One-time setup: marks videos with string-started to avoid re-initialisation across reconnects
• Mute-first: videos remain muted by default; pair with StringUnmute if you need later opt-in audio

Basic Usage

import StringTune, { StringVideoAutoplay } from '@fiddle-digital/string-tune';

const stringTune = StringTune.getInstance();
stringTune.use(StringVideoAutoplay);
stringTune.start(60);

<section class="feature-block">
  <video string="autoplay" string-id="hero-demo" string-src="/media/hero-loop.mp4" poster="/media/hero-fallback.jpg" playsinline></video>
</section>

.feature-block video {
  width: min(960px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  display: block;
}

How It Works

• Initialisation: when the module spots a <video string="autoplay">, it assigns string-src to video.src, enables muted looped playback, and prepares event listeners.
• Viewport events: base StringModule emits enter when the element crosses the configured offsets; the module then calls video.play().
• Graceful fallback: if play() rejects (e.g., browser blocks autoplay), the warning log helps you detect it; the video stays ready for manual controls.
• Exit handling: on leave, the module pauses the element to save resources.
• Idempotent setup: the string-started attribute prevents duplicate setup on hot reloads or DOM hydration passes.

Event Signal

StringVideoAutoplay rides on the standard enter / leave object events. Add your own observers when you need telemetry.

stringTune.on('object:enter:hero-demo', () => {
  console.log('Hero video entered viewport');
});

stringTune.on('object:leave:hero-demo', () => {
  console.log('Hero video left viewport');
});

Let StringVideoAutoplay orchestrate the play/pause loop—tag your videos, drop in a poster, and the module synchronises playback with scroll automatically.