A component to play a video by scrolling the page
$ npm install @macfja/svelte-scroll-video
# or
$ yarn add @macfja/svelte-scroll-video
# or
$ pnpm add @macfja/svelte-scroll-video
<script>
import ScrollVideo from "@macfja/svelte-scroll-video";
</script>
<p>...</p>
<ScrollVideo src="https://example.com/my-video.webm" />
<p>...</p>
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>
See Examples.md
Contributions are welcome. Please open up an issue or create PR if you would like to help out.
Read more in the Contributing file
The MIT License (MIT). Please see License File for more information.