Video Streaming for Multi-Screen Size Responsive Performance

I write to share a strategy for optimizing website video streaming performance, particularly on mobile devices and variable screen sizes.

The goal is to improve user experience, reduce data consumption, and minimize performance bottlenecks.

Original article here 👉 [Link Here]

The Problem

High-quality, large video files (e.g., a 30-minute, 300mb video) create several issues:

1. 
   High Data Consumption: Browsers must fully download the large file, which quickly depletes a user's mobile data plan.


2. 
   Slow Playback Initiation: Users experience a delay while the entire file downloads before the video can begin to stream.


3. 
   Performance Bottlenecks: Processing large media files requires significant memory, which can slow down the performance of the user's device.

Solutions

An approach that combines responsive video compression with file segmentation.

Versioned Video Responsive Compression

This strategy involves generating multiple compressed versions of a video, each optimized for different screen sizes (e.g., mobile, tablet, and desktop). This ensures the device only downloads the resolution appropriate for its display, directly addressing the performance issues associated with non-optimized, high-quality files.

Segmentation of Large Video Files

Videos should be broken down into small, manageable segments (chunks), with a corresponding playlist file to manage them.

Playlist File: This is a file that lists multiple media files (or segments) for playback by a media player.

For a 30-minute (1,800-seconds) video, using 10-second segments would result in 180 segments. If the total file size is 300mb, each segment would be approximately 1.67mb.

Example of an MPEG (.m3u8) Playlist File with segment (.ts) media files

**File Name:* playlist_1280x720p.m3u8

#EXTM3U

#EXT-X-VERSION:3

#EXT-X-TARGETDURATION:4

#EXT-X-MEDIA-SEQUENCE:1

#EXT-X-PLAYLIST-TYPE:VOD

#EXTINF:3,

video_track_1280x720p_6_00001.ts

#EXTINF:3,

video_track_1280x720p_6_00002.ts

#EXTINF:3,

video_track_1280x720p_6_00003.ts

#EXTINF:3,

video_track_1280x720p_6_00004.ts

#EXTINF:3,

video_track_1280x720p_6_00005.ts

#EXTINF:3,

video_track_1280x720p_6_00006.ts

#EXTINF:3,

video_track_1280x720p_6_00007.ts

#EXTINF:3,

video_track_1280x720p_6_00008.ts

#EXTINF:1,

video_track_1280x720p_6_00009.ts

#EXT-X-ENDLIST

The web browser would sequentially download each small segment only as needed while playing. This method allows for immediate playback and significantly reduces initial download time and data consumption.

Advanced Responsiveness

The most comprehensive and optimized solution is to combine these two strategies: Generate a master playlist of Compressed, Segmented Videos.

This involves creating separate segmented playlists for each screen size (e.g., a segmented playlist for mobile, one for tablet, and one for desktop). These individual playlists are then aggregated into a single master playlist.

This system allows the browser on any device to play the master playlist and automatically select the most suitable resolution and segment based on the device type, screen size, and Internet (network) speed, ensuring the fastest, most optimal viewing experience for every device type.

Example of a Master Playlist File with screen-size specific playlists

File Name: master_playlist.m3u8

#EXTM3U

#EXT-X-VERSION:3

#EXT-X-INDEPENDENT-SEGMENTS

#EXT-X-STREAM-INF:BANDWIDTH=667612,AVERAGE-BANDWIDTH=508186,CODECS="avc1.64001e,mp4a.40.5",RESOLUTION=480x270,FRAME-RATE=59.940

playlist_480x270p.m3u8

#EXT-X-STREAM-INF:BANDWIDTH=2183596,AVERAGE-BANDWIDTH=1099733,CODECS="avc1.64001f,mp4a.40.5",RESOLUTION=640x360,FRAME-RATE=59.940

playlist_640x360p.m3u8

#EXT-X-STREAM-INF:BANDWIDTH=4853046,AVERAGE-BANDWIDTH=2730357,CODECS="avc1.640020,mp4a.40.5",RESOLUTION=960x540,FRAME-RATE=59.940

playlist_960x540p.m3u8

#EXT-X-STREAM-INF:BANDWIDTH=7945434,AVERAGE-BANDWIDTH=4125547,CODECS="avc1.640020,mp4a.40.5",RESOLUTION=1280x720,FRAME-RATE=59.940

playlist_1280x720p.m3u8

#EXT-X-STREAM-INF:BANDWIDTH=11649009,AVERAGE-BANDWIDTH=7825004,CODECS="avc1.64002a,mp4a.40.2",RESOLUTION=1920x1080,FRAME-RATE=59.940

playlist_1920x1080p.m3u8

Should you have any inquiries or have questions, post your comments below.