Video Ends With Section
Description
The Video Ends With Section component is a sophisticated video integration that creates an engaging scroll-based video experience. It plays a video in sync with the user's scroll position and smoothly transitions to content as the user scrolls further. This component is ideal for creating visually captivating introductions or section breaks in a webpage.
Installation
bash
sabaccui add videoEndsWithSection
Usage
Here's an example of how to use the Video Ends With Section component in a Storyblok block:
Preview
Welcome to our product
Discover the features that make our product unique
Schema
| Field | Type | Description | Default |
|---|---|---|---|
video | asset | The video file to be played. Only accepts video files. Required. | None |
duration | number | The duration of the video in seconds. Used to calculate scroll-based playback. | None |
content | bloks | An array of Storyblok components to be displayed after the video section. | None |
Related Components
This component does not have any directly related components.
Notes
- The component uses a canvas element to render video frames for smoother playback and better performance.
- Video playback is controlled by scroll position, creating a unique interactive experience.
- The component calculates frame rate and manages frame transitions for optimal performance.
- Content opacity is managed to create a smooth transition from video to content.
Best Practices:
- Ensure the video file is optimized for web playback to minimize loading times.
- Keep the video duration reasonable to maintain user engagement.
- Use high-quality, visually appealing video content that complements the following content section.