Poster Image Configuration

Video posters are important for a number of reasons. First, they serve as a visual representation of a video, allowing potential viewers to quickly understand the content, tone, and style of the video. This can help generate interest and encourage people to watch the video. Additionally, video posters can help establish the brand or identity of a video, making it easily recognizable and memorable. They can also be used to promote and advertise a video, both online and offline, helping to increase its visibility and reach a wider audience. Overall, video posters play a crucial role in creating an impact and driving engagement for video content.

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

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

Note that width and height are optional parameters that only needs to be passed when there are multiple poster images. Lura Player will adaptively select the poster image that is closest to the players width. With Lura Player's adaptive poster 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/jpg
image/jpeg
image/webp
image/apng
image/avif

Single poster image

const config = {
    ...
    content: {
        media: [
            ...
            {
                url: "https://picsum.photos/640/360",
                type: "image/jpeg",
            }
            ...
        ]
    }
    ...
};
const player = new lura.Player();
player.setConfig(config);

Multiple poster image

const config = {
    ...
    content: {
        media: [
            ...
            {
                url: "https://picsum.photos/640/360",
                type: "image/jpeg",
                width: 640,
                height: 360,
            },
            {
                url: "https://picsum.photos/1920/1080",
                type: "image/jpeg",
                width: 1920,
                height: 1080,
            }
            ...
        ]
    }
    ...
};
const player = new lura.Player();
player.setConfig(config);