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 Player with Video.js

Please Note that the Viblast Player Integration with Video.js has been changed in Viblast Player v6.0. If you're using an older version then please upgrade.

Viblast Player leverages the existing HTML5 video tag and its API. This allows for easy integration with other HTML5 players. A popular decision is to use Viblast Player together with Video.js, combining Viblast playback with the beautiful Video.js user interface. Viblast Player also transparently integrates with the Flash Version of Video.js allowing for seamless fallback to flash on platforms that don't support HTML5 video and MSE.

Statically adding Viblast Player to Your Website with Video.js

First you need to include video.js and viblast.js in this order. The ORDER is important so be careful:

<html>
    <head>
        <!-- videojs must be included first -->
        <script src="http://vjs.zencdn.net/4.12/video.js"></script>

        <!-- and only then viblast.js -->  
        <script src="path/to/viblast.js"></script>
    </head>
</htm>

Then to get started with Video.js you have to add a video tag to your webpage. For example:

<video id="example_video_1" class="video-js vjs-default-skin"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='{"example_option":true}'>
 <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
 <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>

To integrate Viblast Player, you need to set src= to the url of you HLS/DASH stream, set type to application/x-mpegURL or application/dash+xml, and add data-viblast-key. Like so:

<video id="example_video_1" class="video-js vjs-default-skin"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='{"example_option":true}'
  data-viblast-key="N8FjNTQ3NDdhZqZhNGI5NWU5ZTI=">
 <source src="//cdn3.viblast.com/streams/hls/airshow/playlist.m3u8" type='application/x-mpegURL' />
 <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>

And here is the result (see full example)

Accessing the API

Viblast's API can be accessed through the Video.js object:

videojs("player").viblast.abr

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

Setup for Dynamically Loaded HTML and Video.js

Once Video.js has been initialized, one can change Viblast's properties like this:

videojs("playerid", {autoplay: true});
videojs("playerid").source({src: '//cdn3.viblast.com/streams/hls/airshow/playlist.m3u8', type:'application/x-mpegURL'});

Accessing the API

After initializing Video.js, one can access viblast's API through the Video.js object:

videojs('#player', {}, function() { });
videojs("player").viblast.abr

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

Supported Versions

Viblast Player supports Videojs 4 and above.

The examples here use Videojs 4. If you want to use Videojs 5 then all you you have to do is to include the appropriate javascript and css resources like so:

<link href="//vjs.zencdn.net/5.6.0/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.6.0/video.js"></script>

That's everything. The API is the same for Videojs 4 and Videojs 5. You can find a live example in our codepen page.

Forcing the use of Flash

If you want to use only the flash version of Video.js then you have to set data-setup='{"techOrder": ["viblastflash", "html5"]}'. Here is a snippet:

<video id="example_video_2" class="video-js vjs-default-skin"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='{"techOrder": ["viblastflash", "html5"]}'
  data-viblast-key="N8FjNTQ3NDdhZqZhNGI5NWU5ZTI=">
 <source src="//cdn3.viblast.com/streams/hls/airshow/playlist.m3u8" type='application/x-mpegURL' />
 <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>

In our codepen page you can find a complete example.

Disposing of the player

In many cases you may find yourself wanting to dispose of a Video.js instance, for example when building a Single Page Application. In those cases use the videojs dispose() method. It will remove all UI elements from the DOM tree and free all resources currently acquired by Video.js and Viblast Player.