ZWPlayer Multi-bitrate Streaming Guide

1. Introduction to Multi-bitrate Streaming

The multi-bitrate streaming feature allows the player to automatically select the most appropriate video bitrate based on the user’s network conditions and device capabilities, providing a smoother viewing experience.

Note: To successfully play multi-bitrate programs, the server side needs to support real-time multi-bitrate encoding, or the streaming side must be able to push multiple bitrates of the same program.

Application Scenarios

  • Adaptive bitrate streaming for live programs
  • Switching between main stream and sub-stream for surveillance cameras
  • Video quality adaptation under different network environments

2. Server-side Requirements

Implementing multi-bitrate streaming requires the following server-side support:

Solution 1: Server-side Real-time Transcoding

The server encodes the input raw stream into streams of different resolutions in real-time.

Solution 2: Multi-bitrate Push Streaming

The streaming side pushes multiple streams of the same program to the server simultaneously, such as the main stream and sub-stream of a surveillance camera.

Important: Ensure that all stream content is synchronized to avoid audio-video desynchronization issues.

3. Playback Code Implementation

The following example demonstrates how to configure zwplayer to play multi-bitrate live programs:

// Define multi-bitrate URL configuration
var live_url = {
    murls: {
  			"FULL_HD1": "http://example.com/stream-or4.flv",
  			"HD1": "http://example.com/stream-hd.flv",
  			"SD1": "http://example.com/stream-ld.flv ",
  			"SD2": "http://example.com/stream-sd.flv"
  	},
    multistream: 4
};

// Initialize ZWPlayer configuration
var info = {
    playerElm: '#mse',
    url: live_url,
    infoButton: true, 
};

// Create player instance
var player1 = new ZWPlayer(info);

Parameter Description

  • murls: Object containing URLs for different quality streams
  • multistream: Number of streams, which should match the number of key-value pairs in murls
  • playerElm: The docking element for the player
  • infoButton: Whether to display the stream information button (used to show the currently selected stream)

4. Important Notes

  1. The server side needs to support real-time multi-bitrate encoding, or the streaming side must be able to push multiple streams
  2. Ensure all stream content is synchronized to avoid audio-video desynchronization
  3. Multi-bitrate functionality requires support for network bandwidth adaptive algorithms
  4. Before actual deployment, please fully test the compatibility and stability of each stream

5. Extended Features

In addition to basic multi-bitrate streaming, zwplayer also supports the following related features:

  • Manual stream switching: Users can manually select streams of different quality as needed
  • Automatic bandwidth detection: The player automatically detects network conditions and selects an appropriate stream
  • Seamless switching: Maintains playback continuity when switching between different streams
  • Stream information display: Displays information about the currently playing stream in real-time
  • Supports embedded multi-bitrate selection and adaptive playback for HLS and DASH