Create timeline hovers from a video
Enhance FastPix video player interactivity with timeline hover previews using spritesheets and metadata.
Adding timeline hovers using spritesheets allows developers to display key video frames on hover, enhancing user interaction by providing a visual preview of the video timeline. FastPix makes this process efficient by enabling developers to easily generate spritesheets with precise metadata that can be leveraged to create interactive video hovers.
This feature is commonly used on streaming platforms, video-sharing sites, and social media to help users quickly identify sections they are interested in watching.
When users hover over different points on the video timeline, thumbnail images from specific frames are displayed, giving them a quick visual cue of the video’s content at that time.
Timeline hover previews can improve your user engagement by:
FastPix lets you implement timeline hover previews by providing an API that generates spritesheets—single image files containing multiple frames from a video. These frames are organized in a grid-like format, enabling fast and efficient access to individual video thumbnails.
A spritesheet is a powerful tool in video playback and gaming applications, designed to store multiple frames or images within a single file. In the context of video hover previews, spritesheets consolidate key frames from a video, making it easy to display any frame from the timeline with minimal server requests.
Using spritesheets for timeline hovers offers several advantages. Rather than loading multiple image files, spritesheets groups frames into a single file, which saves bandwidth and reduces server load. This streamlined approach also enables faster loading times, as an entire set of frames can be accessed with a single HTTP request, which significantly enhances the speed of hover previews. Additionally, spritesheets provide consistent frame quality across previews, since each frame is predefined and encoded within the same file, maintaining uniform visual quality and creating a seamless user experience.
Spritesheets used for timeline hovers are typically organized into a grid, with rows and columns representing different frames. FastPix provides additional metadata, such as x-axis and y-axis coordinates for each frame, allowing precise positioning and easy access to individual frames within the spritesheet.
In addition, FastPix offers metadata in both WebVTT (Web Video Text Tracks) and JSON formats, which helps to retrieve and display frames according to hover position along the video timeline.
This metadata includes:
By combining spritesheets with metadata, FastPix enables developers to create smooth, responsive timeline hovers that enhance the user’s ability to navigate video content.
Start by uploading your video to the FastPix platform to prepare it for on-demand viewing and spritesheet generation. Here’s how:
Documentation references
For quick start, check out FastPix’s setup guide here.
For uploading media using URL, refer Upload videos from URL guide.
For uploading media directly from device, refer Upload videos directly guide.
To get a spritesheet for your video, send an HTTP request to FastPix using your video’s unique playback ID. This request returns a spritesheet image in the specified format, providing visual snapshots of the video at set intervals.
Use the following URL format to request a spritesheet:
Output Formats:
NOTE
FastPix automatically adjusts the number of tiles based on video length:
- Video under 15 minutes produce a spritesheet with 50 tiles
- Video over 15 minutes generate a spritesheet with with 100 titles.
Each spritesheet comes with metadata that contains detailed coordinates for each frame, allowing for accurate positioning of images on a timeline. This metadata is essential for creating an interactive hover effect.
A metadata file accompanies each spritesheet and can be used as a text track for video timelines. This file contains each tile’s x and y coordinates and the associated time range within the video. Additionally, the metadata is available in both JSON and WebVTT formats for easy integration.
Path parameters
Query parameters
Example request:
Here’s the output of the request below:
Path parameters
Query parameters
Example request:
Here’s the output of the request below:
Each tile object specifies the frame’s start time in the video and its x/y coordinates within the spritesheet. This format makes it easy to retrieve frames for timeline hovers by referencing the time intervals and coordinates.