Fluid Player documentation

Fluid Player documentation

  • Homepage
  • GitHub

›Streaming

Overview

  • Overview

Integration

  • Quick setup
  • Vue.js
  • React

Configuration

  • Layout
  • Advertisements
  • Previews
  • Subtitles
  • VR (experimental)
  • Advanced

API

  • Controls API
  • Utility API
  • Event API

Streaming

  • Streaming support
  • HTTP Live Streaming (HLS)
  • MPEG-DASH

About

  • Help
  • Changelog
  • License

HTTP Live Streaming (HLS)

HTTP Live Streaming (also known as HLS) is an HTTP-based media streaming communications protocol implemented by Apple Inc. as part of its QuickTime, Safari, OS X, and iOS software. This definition taken from the HLS wikipedia page.

It works similarly to DASH by breaking the content into chunks and serving it one segment at a time, potentially with no final chunk.

Fluid Player makes use of hls.js to play .m3u8 files. Once an .m3u8 file is set as the source the Fluid Player will play it, as can be seen in the below example.

<video id='hls-video'>
    <source src='stream_hls.m3u8' type='application/x-mpegURL'/>
</video>

<script>
fluidPlayer(
    'hls-video',
    {
        layoutControls: {
            fillToContainer: true
        }
    }
);
</script>

HTTP Live Streaming with VAST

Fluid Player supports HTTP Live Streaming with VAST tags. For .m3u8 files to be played, the VAST MediaFile tag must have the following attributes:

  • delivery should be set as streaming
  • type should be set as application/vnd.apple.mpegurl

For example:

<MediaFile id="1" delivery="streaming" type="application/vnd.apple.mpegurl" width="480" height="640">
    <![CDATA[ https://example.com/stream_hls.m3u8 ]]>
</MediaFile>

Customizing HLS

Fluid Player has hooks that support hls.js configuration, a full list of configurable properties can be found in the official hsl.js API docs. Below is an example of a configuration where you can set the maximum buffer length and streaming quality with which the video will be started.

fluidPlayer('fluid-player', {
    modules: {
        configureHls: (options) => ({
            maxMaxBufferLength: 30, // Max length of buffered video in seconds
            startLevel: 4, // Starting quality level - 4 is usually Full HD (1080p), but this can change by source
            ...options,
        })
    }
});

For more information on using hooks see the Advanced configuration page.

Last updated on 19/08/2022
← Streaming supportMPEG-DASH →
Fluid Player documentation
Docs
OverviewQuick setup
More
HomepageGitHubStar
Copyright © 2023 Fluid Player and contributors