HTML5 player for SLDP – Softvelum

HTML5 playback for SLDP

Ultra-low latency via JavaScript freeware 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:

  • Sub-second delay in playback.
  • H.264/AVC, VP8 and VP9 video.
  • H.265/HEVC in Safari.
  • AAC audio in all supported browsers.
  • MP3 audio in Safari and Firefox.
  • Opus audio on Windows, Linux and Android platforms.
  • Adaptive bitrate (ABR) support with automatic renditions switch according to network conditions. Switch time is limited only by GOP size.
  • Synchronized playback in multiple players, browsers and devices. Visit demo page to try it in action.
  • HTML5 Player can be set up as mosaic video wall of multiple players.
  • Offset support for zap time decrease.
  • Delivery methods are HTTP and HTTPS on top of TCP which means you don’t need any special network settings.

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 and Safari on iPad iOS platforms.
General iOS browser playback is not yet available. However you can install our Larix Player for iOS which is opened on clicking sldp:// and sldps:// links. You may create your own iOS apps for SLDP playback using Larix Player iOS SDK.

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.

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-v2.21.3.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 parameter 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.
  • 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 is the default resolution in case you use ABR stream, e.g. ‘240p’, ‘480p’. Deprecated in favor of adaptive_bitrate -> initial_rendition parameter.
  • buffering is 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 parameter 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 object. It can be defined as object, true and false values. true value is the same as 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 920×460 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 only with version 14.1;

      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 download VU 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’}.

  • 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′.

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.

  • 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.

Demos

  • You can try web player on this testing page if you have SLDP being available in Nimble Streamer.
  • Nimble Advertizer demo page shows SLDP with server-side ads insertion via SLDP HTML5 player.
  • Synced demo is HTML5 demo page with two HTML5 SLDP players running in sync.
  • Mosaic demo shows mosaic video wall of SLDP HTML5 players.