svelte-scroll-video Svelte Themes

Svelte Scroll Video

A component to play a video by scrolling the page

Svelte Scroll Video

A component to play a video by scrolling the page

Installation

$ npm install @macfja/svelte-scroll-video
# or
$ yarn add @macfja/svelte-scroll-video
# or
$ pnpm add @macfja/svelte-scroll-video

Usage

<script>
  import ScrollVideo from "@macfja/svelte-scroll-video";
</script>

<p>...</p>
<ScrollVideo src="https://example.com/my-video.webm" />
<p>...</p>

Example on REPL

Configurations

Option Type Default Description
pixelPerSec Prop 1000 Number of pixel to scroll for 1 sec of video
on:playing Event N/A This event is dispatched every times the playing status changes (event.detail contain true if the video is progressing)
on:position Event N/A This event is dispatched every times the playback is updated (event.detail contain the number of seconds elapsed)
--video-background CSS Property transparent The color behind the video
--video-height CSS Property 100vh The height of the video
any value Prop empty All attribute you want to pass to the <video> element
any value Slot empty Any data that you want to be a child of the <video> element
<ScrollVideo
    pixelPerSec="250"
    on:playing={e => console.log('The video is ' + (e.detail?'playing':'in pause')}
    on:position={e => console.log('The video is at its '+(e.detail)+' seconds')}
    --video-background="black"
    --video-height="90vh"
    src="https://example.com/my-video.webm"
>
    <track src="https://example.com/captions.srt" kind="captions" />
</ScrollVideo>

Examples

See Examples.md

Contributing

Contributions are welcome. Please open up an issue or create PR if you would like to help out.

Read more in the Contributing file

License

The MIT License (MIT). Please see License File for more information.

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes