Table of contents of this page:

Welcome to Viblast Documentation

Everything you need to know about Viblast Solutions. For more information contact us.

Viblast Documentation

Integrating Viblast via a Video tag

There are two paths to integrating Viblast in a web page: statically (through setting up HTML attributes) and dynamically (through JavaScript).

Statically adding Viblast Player to Your Website with a video tag

  1. If you want to self-host Viblast Player, download viblast-player.zip from the e-mail we sent you after your request and extract it in a directory suitable for your project. Alternatively, use the library directly from our servers using the link provided in the email. Either way, take a look at the .zip file as it contains helpful html example pages.

  2. Include viblast.js in you page.

    <head>
    ...
    <script src="path/to/viblast.js"></script>
</head>

  3. Put a video tag on you page with src pointing to your desired HLS or DASH stream

    <body>
...
<video src="//cdn3.viblast.com/streams/hls/airshow/playlist.m3u8" data-viblast-key="N8FjNTQ3NDdhZqZhNGI5NWU5ZTI=" controls width="640"></video>
...
</body>

    You will get your own Viblast key after you purchase Viblast Player. If you have already done so you can find your key in the email we've sent you or by logging in the Dashboard. If you are using the free version then you can use the key provided in the examples above.

  4. Now your HTML5 video player can handle HLS & MPEG-DASH streams. Tell us how it went.

    You can continue using the video tag as usual. For example, if you want to pause it:

    var videoElement = document.getElementById('my-video-tag');
videoElement.pause();

    If you want autoplay then you can specify it as an attribute of the video element

    <video data-viblast-key="N8FjNTQ3NDdhZqZhNGI5NWU5ZTI=" autoplay src="//cdn3.viblast.com/streams/hls/airshow/playlist.m3u8" width="640"></video>

    and so on.

Accessing the API

Once the DOM has loaded, Viblast's API can be accessed like this:

<body>
<video id="vplayer" src="//cdn3.viblast.com/streams/hls/airshow/playlist.m3u8" data-viblast-key="N8FjNTQ3NDdhZqZhNGI5NWU5ZTI=" controls width="640"></video>
<script>document.getElementById('vplayer').viblast.abr</script>
</body>

See the CodePen example and the full list of configuration properties.

HE-AAC support

Versions of Chrome less than 50 do not auto detect the HE-AAC audio codec. This means that if the audio stream is encoded using HE-AAC then you should signal this explicitly to Viblast Player by adding data-viblast-he-aac="true" to the video tag. This limitation applies only to HLS.

<video src="http://myserver.com/playlist.m3u8" data-viblast-key="N8FjNTQ3NDdhZqZhNGI5NWU5ZTI=" data-viblast-he-aac="true"></video>

See it in action

See the Pen ID3 Metadata Support by Viblast (@Viblast) on CodePen.

Setup for Dynamically Loaded HTML

If your web page or application loads the video tag dynamically (AJAX, appendChild, etc.), it may not exist when the page loads. In such a scenario, you'll want to manually set up the player instead of relying on the data-viblast-key attribute. To do this, run the following JavaScript some time after the viblast.js JavaScript library has loaded and after the video tag has been loaded into the DOM.

viblast("#target-video-tag").setup({
    key: 'N8FjNTQ3NDdhZqZhNGI5NWU5ZTI=',
    stream: '//cdn3.viblast.com/streams/hls/airshow/playlist.m3u8',
    autoplay: true
});

The first argument in the viblast function is a selector of your video tag.

The second argument is an options object.

  • The key attribute must have the same value as the data-viblast-key attribute you would add to a statically loaded video tag.
  • The stream attribute is the url of the HLS/DASH stream
  • autoplay is self explanatory. If not specified, the value of the autoplay attribute of the video tag will be used instead.

key and stream are the only mandatory attributes.

Instead of using a selector, you can also pass a reference to the element itself.

viblast(document.getElementById('target-video-tag'), /* as before */);

To stop and completely unload the Viblast Player and its entire state (allocated resources, opened HTTP connections and so on):

viblast("#target-video-tag").stop();

And here is a tiny example to get you started:

<video id="my-cool-video-tag" controls width="800"></video>
<button onclick="start_viblast();">Start</button>
<button onclick="stop_viblast();">Stop</button>
<script>
function start_viblast() {
    viblast('#my-cool-video-tag').setup({
        key: 'N8FjNTQ3NDdhZqZhNGI5NWU5ZTI=',
        stream: '//cdn3.viblast.com/streams/hls/airshow/playlist.m3u8',
        autoplay: true
    });
    document.getElementById('my-cool-video-tag').viblast.abr
}
function stop_viblast() {
    viblast('#my-cool-video-tag').stop();
}
</script>

And the result (see full example)

Changing the video stream

If you want to change the video stream from one resource to another then you have to first stop the player by calling viblast(...).stop() and then set it up again by calling viblast(...).setup(...). Here is an example:

    function change_src(new_src) {
        viblast('#my-cool-video-tag').stop(); // ensure that Viblast Player is stopped
        viblast('#my-cool-video-tag').setup({
            key: 'N8FjNTQ3NDdhZqZhNGI5NWU5ZTI=',
            stream: '//cdn3.viblast.com/streams/hls/airshow/playlist.m3u8',
            autoplay: true
        });
    }

Please note that vilbast(...).setup(...) cannot be called twice for the same video element without stopping Viblast Player first.

Accessing the API

Once Viblast's setup has finished initializing the player, the API can be accessed through the DOM:

viblast('#player').setup({
  stream: '//cdn3.viblast.com/streams/hls/airshow/playlist.m3u8',
  key: 'N8FjNTQ3NDdhZqZhNGI5NWU5ZTI',
});

var viblastApi = document.getElementById('player').viblast;

See the CodePen example and the full list of configuration properties.