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>
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
Want a Svelte site built?
Hire a Svelte developer