Trick Play Configuration

Trick play images are a compilation of cropped images extracted from various frames of a video, serving as visual cues for viewers to quickly navigate to desired locations within the video. These images enable users to efficiently scan, select, and explore the video content, enhancing their overall viewing experience.

To configure the trick play image of a video in Lura Player, you can use the following configuration.

Attribute	Type	Required	Description
url	string	yes	Trick play URL of the content.
type	string	yes	MIME type of the content.
width	number	no	Width of the content (not required for single trick play image)
height	number	no	Height of the content (not required for single trick play image)

Note that width and height are optional parameters that only needs to be passed when there are multiple trick play images. Lura Player will adaptively select the trick play image that is closest to the window width and scale accordingly. With Lura Player's adaptive trick play image selection, you can optimize your video content delivery, reduce bandwidth consumption, and provide a superior viewing experience for your customers.

Here are the supported MIME types:

• image/bif

Single trick play image

const config = {
    ...
    content: {
        media: [
            ...
            {
                url: "https://example.com/pvw.bif",
                type: "image/bif",
            }
            ...
        ]
    }
    ...
};
const player = new lura.Player(document.getElementById("player"));
player.setConfig(config);

Multiple trick play images

const config = {
    ...
    content: {
        media: [
            ...
            {
                url: "https://example.com/pvw.bif",
                type: "image/bif",
                width: 640,
                height: 360,
            },
            {
                url: "https://example.com/pvw2.bif",
                type: "image/bif",
                width: 1920,
                height: 1080,
            }
            ...
        ]
    }
    ...
};
const player = new lura.Player(document.getElementById("player"));
player.setConfig(config);