banner

Introduction into
HLS / m3u8

What is m3u8 file ?

Probably you already found some link looking like https://bradmax.com/static/video/tos/440272.m3u8

This is a link to a small text file, which defines HLS stream (HTTP Live Streaming). Such “stream” is simply one media splitted smartly into multiple files, which gives the ability to adjust playback to your internet connection speed. If you have a fast internet connection, then video with the highest quality will be used. If you got poor connection with a streaming server then automatically lower quality will be used.

Files in HLS stream

There are two types of files for HLS stream:

  1. *.m3u8 - manifest files, which are ordinary text files containing important information about whole stream (how many video qualities are available, where to find them, if there are different audio / text tracks - for multi-language streams and more).
  2. *.ts- video segment files. These files contain video splitted into small parts for each defined quality. This gives the player the ability to “switch” video stream from one quality to another one for adapting to current connection speed between user and streaming server.

Advantages of HLS

HLS is a very common stream format with best support on most devices. It can be played natively on Android or iOS devices and with small help on PC devices too (for example you can use hls.js library for it). This is the best format for non-DRM content distribution (For DRM content it is not so easy).

For playback you can use different video players and by yourself choose, which one use on which platform. Or you can use simply our free player, which handles it automatically. You just need to paste link to *.m3u8 main manifest into player configuration and player will do the rest.

Because of good support HLS it is widely used in many applications like:

  • VOD content streaming
  • live content streaming (web video cameras, event transmissions, etc.)

Examples

1. Putting player directly into your HTML page

<script src="https://bradmax.com/client/files/player-js/73a9716fd26717763cd2d46fb9e41463645853de_14815/bradmax_player.js" ></script>
<div style="width: 890px; height: 500px; background: black;" id="PLAYER_DOM_ID"></div>
<script type="text/javascript">
    var config = {
        dataProvider: {
            source: [
                { url: "https://bradmax.com/static/video/tos/440272.m3u8" }
            ]
        }
    };

    /** find player container in html DOM tree. */
    var element = document.getElementById("PLAYER_DOM_ID");

    /** create player */
    var player = window.bradmax.player.create(element, config);
</script>

For player documentation see: https://bradmax.com/static/player-doc/configuration.html#html-player-configuration

2. Iframe embed code

For simplicity we also provide small embed HTML code with iframe (very similar to youtube embed code). You can easily generate it via our client panel.

<iframe src="https://bradmax.com/client/embed-player/a75680a661c3aa3e5137f6923513738c12dae3e2_3496?mediaUrl=https%3A%2F%2Fbradmax.com%2Fstatic%2Fvideo%2Ftos%2F440272.m3u8&title=Tears%20of%20steel&duration=734.097415&splashImgUrl=https%3A%2F%2Fbradmax.com%2Fstatic%2Fimages%2Fstartsplash.jpg" width="600" height="400" frameBorder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

For player documentation see: https://bradmax.com/static/player-doc/iframeembed.html

3. Wordpress plugin

If you are familiar with Wordpress CMS, then you can try our Bradmax plugin: https://pl.wordpress.org/plugins/bradmax-player/

Embedding player in simple case is very easy with Wordpress shot-code

[bradmax_video url="https://bradmax.com/static/video/tos/big_buck_bunny.m3u8" duration="596" poster="https://bradmax.com/static/images/startsplash.jpg"]

See wikipedia for more details about HLS format: HTTP Live Streaming

welcome