Overview

FastPix Player is a versatile media player designed to adapt its user interface (UI) based on various factors such as stream type, features, and player size. This guide will help you understand how the Player achieves responsiveness and adapts its controls based on different scenarios.

Responsiveness overview

The responsiveness of FastPix Player is guided by the dimensions of its container, rather than the size of the entire viewport. This design principle means that within a large viewport, each player adapts its layout and controls based on its specific container size. Consequently, the user experience is tailored and optimized for each individual player, no matter how many players are present on the screen.

What is a View Port?

The viewport is the area of a web page that a user can see. The size of the viewport depends on the device being used and can change when the user resizes the browser window. For example, on a desktop, the viewport is the same size as the browser window, excluding the toolbar and other elements. On a mobile device, the viewport is typically the same size as the device's screen.

Key factors affecting UI adaptation

Stream type

• On-Demand: When playing on-demand content, FastPix Player will display controls optimized for user interaction, such as play/pause, seek bar, volume control, and more.
• Live: For live streams, the controls will focus on real-time interaction, featuring elements such as live indicators, minimal seek functionality, picture-in-picture control, full-screen/exit-full-screen options, and a quality selector and Live tag.

Feature set

Depending on the enabled features (e.g., quality selection, speed control, forward-skip and backward-skip, audio tracks control if audios and subtitles are present in that specific stream, and more), the player UI will adjust to include the necessary controls. For example, disabling subtitles will hide the subtitles button from the control bar if subtitles are present in the stream.

Player size

The player UI adapts to the size of its container to ensure optimal usability:

• Large containers: Feature-rich experience with a full set of controls.
• Medium containers: Balanced control layout ensuring only essential functions are accessible.
• Small containers: Prioritizes only the core functionality to fit within the limited space.