Create timeline hover previews

Add storyboard images to your player to show previews when a viewer hovers over the timeline. Use hover previews to make seek, fast-forward, and rewind more visual.

What are timeline hover previews?

Timeline hover previews, also known as trick play or scrub bar previews, make player operations like fast-forward, rewind, and seeking more visual to the user. Here it is in action:

Each image (also called a thumbnail or tile) you see when hovering over the scrub bar (or player timeline) on the video player is part of a larger image called a storyboard. A storyboard is a collection of thumbnails or tiles, created from video frames selected at regular time intervals and are arranged in a grid layout.

Below is an example storyboard for the video, Tears of Steel, the same video used to demo timeline hover previews above:

Add timeline hover previews to your player

There are a few different ways to add this functionality to your players, depending on which methods your chosen player exposes to support timeline hover previews.

The storyboard image can be requested from the following URL in either webp, jpg, or png format from Mux:

Each storyboard has an associated metadata file and can be used as a metadata text track. The storyboard image is referenced from the metadata in this case.

The storyboard metadata provides the x-axis and y-axis coordinates of each image in the storyboard image and the corresponding time range. The metadata is available in both WebVTT and JSON format.

Storyboard images will contain 50 tiles within the image if the asset is less than 15 minutes in duration. If the asset is more than 15 minutes, then there will be 100 tiles populated in the storyboard image.

WebVTT

Most popular video players use WebVTT files for describing individual tiles of the storyboard image. You can request the WebVTT file by making a request to generate a storyboard of the image.

By default, this request will generate a `jpg` for the storyboard image. If you'd like to change the format to `webp`, you can do so by adding `?format=webp` to the end of the request URL:

#### [WebVTT Compatible Video Players](/content/docs/guides/create-timeline-hover-previews#webvtt-compatible-video-players/index.html)

The list below shows the various video players supporting the WebVTT files for trick play. If your player isn't listed here, [please reach out](/content/support/index.html), and we'll help where we can!

- [VideoJS](https://videojs.com/) + [VTT Thumbnails plugin](https://www.npmjs.com/package/videojs-vtt-thumbnails)
- [JW Player](https://docs.jwplayer.com/players/docs/ios-add-preview-thumbnails)
- [THEOplayer](https://www.theoplayer.com/docs/theoplayer/how-to-guides/texttrack/how-to-implement-preview-thumbnails/)
- [Bitmovin](https://bitmovin.com/demos/thumbnail-seeking)
- [Flow Player](https://flowplayer.com/demos/video-thumbnails)
- [Plyr](https://plyr.io/)

Using a WebVTT file may be limited to HTML5 browser-based video players and may not be supported in device-specific SDKs including iOS and Android. iOS, Android, and other device platforms use an HLS iFrame Playlist. Generating HLS iFrame Playlists is on Mux's roadmap.

### [JSON](/content/docs/guides/create-timeline-hover-previews#json/index.html)

There are many other scenarios for using storyboards. For instance:

- A quick way of previewing the entire video can save the video editor/reviewer's time without requiring a full video playback
- Ease of developing trick play-like functionality in Chromeless Video players like [hls.js](https://github.com/video-dev/hls.js/)

Using a WebVTT file for metadata can be burdensome to implement. Storyboard metadata expressed in an easy to understand & widely supported format like JSON helps in taking advantage of storyboards in new ways. Mux provides the same storyboard metadata in JSON format.

Cross-Origin Resource Sharing (CORS) requirements

The storyboards URLs use the image.mux.com hostname and the stream.mux.com hostname is used for video playback URL. Because the URLs use different hostnames, it is recommended to add the crossorigin attribute to the <video> HTML tag for access.

Roku trick play

Roku announced changes to their channel certification criteria mandating trick play for on-demand video longer than 15mins starting October 1st, 2020. To support this requirement, you can add this playback modifier for playback on Roku devices when making a playback request:

Mux will include an Image Media Playlist in the HLS manifest to support this requirement on Roku.

Using roku_trick_play with signed URLs

If you are using signed playback URLs make sure you include the extra roku_trick_play in your signed token.

Using signed URLs

Mux videos have two types of playback policy, public or signed. If your playback_id is signed, you will need to also sign requests made for storyboards. You can check out how to do that in our signed URLs guide.