Efficient tools to build your streaming infrastructure

HTML5 playback for SLDP

Ultra-low latency via JavaScript freeware player

SLDP HTML5 Player

SLDP is a streaming protocol based on WebSockets so its streams can be processed in modern browsers.

HTML5 SLDP Player key features include the following:

Please also take a look at frequently asked questions to see advantages and best techniques of SLDP usage.

Browser support

SLDP browser playback is based on MSE. The player is created with JavaScript and it can be embedded in any HTML5 page.

It's currently supported by Chrome, Firefox, Safari, Microsoft Edge, Chromium on Windows, Linux, macOS, Android, iPad and iPhones with iOS17+ platforms.

Please notice that IE 11 and Microsoft Edge browsers currently require to buffer at least 3 seconds before starting the stream. So SLDP Player will have additional latency there.

You can add DVR support into SLDP HTML5 Player by using HLS DVR streams. Read Adding DVR into SLDP HTML5 Player article for setup and usage details and red more about vod parameter below.

Download and embed

SLDP Player is available for free download. Release notes are here.

You can embed it as shown on the following example below.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <script src="sldp-v3.0.1.min.js"></script>
  </head>
  <body>
    <div id="player"></div>

    <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", initPlayer);

      function initPlayer(){
        sldpPlayer = SLDP.init({
          container:           'player',
          stream_url:          'ws://123.123.123.123:8081/live/stream',
          adaptive_bitrate: {
            initial_rendition: '240p'
          },
          buffering:           500,
          autoplay:            false,
          height:              480,
          width:               424
        });
      };

      function removePlayer(){
        sldpPlayer.destroy(function () {
          console.log('SLDP Player is destroyed.');
        });
      }
    </script>
  </body>
</html>

Control parameters

Parameters below can be used for player setup.

  • container - indicates the page element ID to use for display
  • stream_url - defines the URL to connect in order to start receiving the content. The origin needs to have SLDP support to provide the stream. Check Nimble Streamer as example.
  • vod - video on demand (VOD) playback settings. VOD feature provides playback of recorded live stream. The recorded stream is usually called DVR stream. VOD settings can be defined as an object, or simply with true or false values. true value has the same meaning as an empty object, false means the feature is switched off. If this parameter is not defined, VOD functionality is not working by default. VOD feature is backed by open source HLS.js library. Please read Adding DVR into SLDP HTML5 Player article for setup and usage details.
    The following settings are supported:
    • url - (optional) URL to HLS stream that provides recorded content. If not defined, SLDP Player will use default Nimble Streamer DVR path according to the live stream URL.
    • hlsjs - (optional) HLS.js library settings. It can be either object or string. Currently 2 string values are available:
      • 'local' - HLS.js is already included in the web application, so SLDP Player doesn't load anything.
      • 'cdn' - (default) SLDP Player will automatically load HLS.js library from the official CDN URL.
      If the hlsjs parameter is defined as object, it can contain the following fields (currently only one parameter is supported):
      • source - a URL to HLS.js library if a specific version is required.
    Here are a few examples:
    vod: true,
    vod: {
        url: 'https://myserver.com:8081/live/stream/playlist_dvr.m3u8',
        hlsjs: 'local'
    },
    vod: {
        hlsjs: {
            source: 'https://cdn.jsdelivr.net/npm/hls.js@1'
       }
    }
  • autoplay - defines whether the stream needs to be played right after the player is initialized. Not all modern browsers allow autoplay with sound, so you can use 'muted' parameter to meet the restriction. If a stream doesn't play automatically, please read Q8 in SLDP FAQ about this.
  • muted - defines whether player is muted on start. Can be helpful to autoplay video in modern browsers.
  • width - defines the width of the player. Possible values: integer (width in pixels) or 'parent' string (occupies 100% of parent element's width).
  • height - defines the height of the player. Possible values: integer (height in pixels) or 'parent' string (occupies 100% of parent element's height).
  • initial_resolution - default resolution in case you use ABR stream, e.g. '240p', '480p'. Deprecated in favor of adaptive_bitrate -> initial_rendition parameter.
  • buffering - player's buffer size in milliseconds. Default value is 1000 (1 second). The minimum recommended value is 300-500 milliseconds. Some video content may require greater buffer size for decoding, so short buffer can cause twitching playback. Please verify your playback quality if you want to use small buffer size.
  • offset - allows decreasing start time for streams. Read this article for more details.
  • latency_tolerance - latency retention parameter expressed in milliseconds. When initial latency has become greater than the specified value (due to whatever reason, like network conditions or CPU performance), it forces player to reestablish the initial latency as it becomes possible. It's important to understand, that latency retention has its cost, the player skips a part of stream to preserve latency. The rough analogy can be TV broadcast, when corrupted image is displayed but the whole stream is not delayed. Read this article for more details. The minimum recommended value is 400-500 milliseconds, 0 - the parameter is switched off.
  • latency_adjust_method - defines method, that player uses to adjust latency when it exceeds latency_tolerance threshold. Can be either 'seek' (skipping frames) or 'fast-forward' (temporary increasing playback speed). Default value is 'seek'.
  • splash_screen - defines the URL to splash image.
  • adaptive_bitrate - adaptive bitrate (ABR) settings. They can be defined as object, or simply with true or false values. true value has the same meaning as an empty object. false value means that ABR is switched off. If this parameter is not defined, ABR functionality is turned ON by default. The following settings are supported:
    • initial_rendition - default rendition which the player will set on start, e.g. '240p', '480p'.
    • max_rendition - maximum rendition that the player will set automatically (e.g. '720p', '1080p'), higher resolutions will be available for manual switch.
    • size_constrained - if set to true, the player won't automatically switch to renditions which dimensions exceed the actual player size more then 5%. I.e. if the actual player size is 920x460 pixels and available renditions are '240p', '480p' and '720p' with aspect ratio 16:9, then the player will automatically switch only to '240p' and '480p', but not '720p'. This parameter is false by default.
  • pause_timeout - when playback is paused, this parameter specifies period of time in seconds during which connection to media server is retained and closed right after that period. It allows to save extra traffic passed from media server to the client during long pause.
  • key_frame_alignment - allows to obtain smooth rendition switching if all renditions are key frame aligned, i.e. key frames in every rendition have same timestamps. Default value is false.
  • controls - defines whether control elements, e.g. play, pause, volume, etc. are shown to user. Default value is true.
  • audio_only - enables audio only mode. If enabled, only audio part of given SLDP stream is reproduced and player UI is collapsed to control bar. Defaul value is false.
  • video_only - enables video only mode. If enabled, only video part of given SLDP stream is reproduced. Default value is false.
  • audio_title - player title, which is displayed in audio only mode. By default, it's not set.
  • reconnects - number of reconnect attempts, those SLDP player performs when connection to media server is lost. Must be greater than 0, default value is 10. First 5 attempts are performed every second, the rest attempts are performed every 5 seconds.
  • muteable - enables automatic compensation of missing audio stream. This parameter is necessary if target stream doesn't contain audio samples when it's muted. Default value is false.
  • fullscreen - defines whether to start player in a full screen mode. By default, it's false.
  • ios_failback_app_url - SLDP iOS fallback application URL. By default it's Larix Player. Read this article for more details.
  • ios_failback_scheme - SLDP iOS fallback scheme for non-secure connection (ws://). By default, it's 'sldp'
  • ios_failback_secure_scheme - SLDP iOS fallback scheme for secure connection (wss://). By default, it's 'sldps'
  • sync_buffer - buffer size in milliseconds for synchronized playback feature. Recommended values are from 1000 to 5000. Notice, that stream latency will increase according to the specified size. By default, the feature is turned off.
  • vu_meter - a volume unit (VU) meter settings object. VU meter shows volume level in decibels for each audio channel. The volume level is calculated at constant rate from magnitudes of audio samples available in buffer at a time. Buffer size can vary from 128 samples to 2048 samples, depending on audio processing interface. The calculation is performed according to the specified mode (see below). The following settings are supported:
    • api - audio processing interface used by VU meter. The value can be either'ScriptProcessor'or'AudioWorklet'. ScriptProcessor is a legacy interface which implies single thread audio processing and is marked as deprecated in favor of AudioWorklet by current Web Audio API spec. Nevertheless, it's still actively used. The pros of ScriptProcessor are:
      • it's supported over the years by all major browsers;
      • it doesn't require secure context (works on http:// pages as well as on https://);
      The main downside of ScriptProcessor is low performance, which becomes noticeable when running 10+ SLDP Player instances with VU meter enabled on single page. AudioWorklet in turn has the advantage of processing audio data in a separate thread, thus providing much better performance, but it has 2 cons:
      • it requries secure context (works only on pages loaded via https:// or on localhost);
      • it's available in Safari starting version 14.1 only;
      SLDP Player uses ScriptProcessor interface by default. If 'AudioWorklet' value is set, but the context isn't secure or browser doesn't support AudioWorklet interface, then SLDP Player will switch back to ScriptProcessor instantly. In order to use AudioWorklet, please verify that separate VU meter worklet file is placed to the same directory as SLDP Player file. So, if you include SLDP Player script from Softvelum release directory, then VU meter worklet will be available on your page automatically. If you downloaded SLDP Player file and placed it to a directory on your site, please also downloadVU meter worklet and place it to the same directory.
    • container - ID of the VU meter container. VU meter UI is drawn on the player's initialization and occupies the whole container's size. VU meter can be of vertical orientation (if container's height >= width) or horizontal orientation (if container's width > height). This parameter is optional for SLDP Player SDK, where you can use onVUMeterUpdate callback to obtain VU meter values.
    • mode - the way which audio level values are calculated. Three options are available:
      • peak - audio level is computed from maximum sample magnitude currently available in the buffer (recommended mode).
      • rms - audio level is computed from root mean square of all sample magnitudes available in the buffer.
      • avg - audio level is computed from average of all sample magnitudes available in the buffer.
    • type - VU meter readings type. Can be either 'input' or 'output'.
      • output - (default) VU meter takes readings from output signal, so audio level depends on the player's volume. It always shows minimum level when the player is muted.
      • input - VU meter takes readings from input media, so audio level doesn't depend on output player's volume.
    • rate - (optional) audio level update frequency limit. Defines maximum number of times VU meter is updated per second. onVUMeterUpdate() callback invokation rate is also limited by this parameter. Can be set to any value from 0.001 to 50. By default it's 6 times per second.
    • db_range - (optional) decibel scale range which is plotted in the VU meter UI. The minimum value is (-1) * db_range, the maximum value is 0. By default, this parameter is 100, so default VU meter UI scale is from -100 dB to 0 dB.
    If this parameter isn't specified, VU meter is turned off. A common example of VU meter settings is: {container: 'vu-meter-container-id', mode: 'peak'}.
  • opus_decoder - enables built-in Opus decoder, allowing Opus audio playback on iOS < 17 (IPhone) and other platforms without MSE support. By default its value is false.
  • video_element - (SDK only) ID of external (custom) video element, to which SLDP player will apply its output. Should be used with SDK interfaces and callbacks to set up custom player UI.
  • aspect_ratio - (SDK only) defines aspect ratio which video is adjusted to, e.g. '16:9'.
  • screenshots - (SDK only) automatic screenshot capture settings object. Can be set to {} or true to enable screenshots without specific settings. Screenshots should be obtained via onScreenshotReady(imageData, pts) callback. The following parameters are supported:
    • rate - (optional) screenshot capture rate per second. If not defined, then no restriction is applied and number of screenshots per second is equal to the video frame rate.
  • captions - (SDK only) CEA-608 closed captions settings object. Can be set to {} or true to enable captions without specific settings. Each caption track is represented by ID: cap_obj pair, where the ID is one of the following: 'CC1', 'CC2', 'CC3', 'CC4'. The cap_obj is an object, that defines the following settings:
    • name - (optional) track name that is shown in caption selection menu. If it's not set, then corresponding ID will be shown instead.
    • lang - (optional) track language that is shown in parentheses in caption selection menu after the track name.
    • default - (optional) defines whether given track should be enabled by default. If this parameter isn't specified for any of the tracks, then captions won't be shown on the player start.
    Here is an example:
    captions: {
     CC1: {name: 'First track', lang: 'English', default: true},
     CC2: {name: 'Third track', lang: 'French'}
    }

The following parameters can be used for debug purposes or to workaround timestamp or decoding issues of particular stream. Use them only if you understand their purpose.

  • adjust_zero_dist_dts - player will adjust the DTS of each frame if it's equal to the DTS of the previous frame(s). The adjustment will be made only if the PTS of all frames can be preserved.
  • fmp4_full_gop - player will serve video segments conaining full GOP (group of pictures) to browser's Media Source. It will increase playback latency to the length of GOP at least. Applicable to H264 and H265 codecs.
  • dts_eq_pts - player will forcibly set DTS (decoding timestamp) of each frame equal to its PTS (presentation timestamp). It can break playback for specific streams with b-frames, so use this parameter with caution.

SLDP Player interfaces (free version)

  • destroy( callback )
    Destroys given player instance, including MSE objects (Media Source Extensions), UI and connections.
    Parameters:
    • callback - (optional) callback function that is invoked after given player instance is destroyed
  • refreshVUMeterUI()
    Re-draws VU meter UI. Should be used in case of VU meter container size has been changed, so the UI will be updated accordingly.

You can use SLDP player free of charge with no limitations. However, technical support is provided only for SDK customers.

HTML5 SLDP Player SDK

Premium SDK package has JavaScript-based library with an additional API to operate.
You can visit SDK documentation page to learn more about this SDK.

This SDK is available for subscribed customers only. Being subscribed, you be able to get updates and our technical support.

Buy player SDK

Demos