Viblast Documentation

Viblast Player with VAST for Video.js

If you're using Viblast Player together with Video.js and find yourself in need of a VAST solution, we offer a seamless integration with Video.js videojs-vast-vpaid plugin for your scenario. Here's how to set it up.

Add viblast, videojs and videojs-vast-vpaid to your page

<html>
    <head>
        <!-- videojs -->
        <link rel="stylesheet" href="http://vjs.zencdn.net/5.9.2/video-js.css">
        <script type="text/javascript" src="http://vjs.zencdn.net/5.9.2/video.js"></script>


        <!-- videojs-vast-vpaid -->
        <link href="https://cdn.rawgit.com/MailOnline/videojs-vast-vpaid/master/bin/videojs.vast.vpaid.min.css" rel="stylesheet">
        <script src="https://cdn.rawgit.com/MailOnline/videojs-vast-vpaid/master/bin/videojs_5.vast.vpaid.min.js"></script>

        <!-- viblast -->
        <script src="//cdn.viblast.com/vb/stable/viblast.js"></script>
        ...
    </head>
    ...
</html>

Place the video tag that's going to be used for video.js on your page with the proper videojs-vast-vpaid plugin configuration

    ...
    <body>
        <video id="vid1" class="video-js vjs-default-skin vjs-big-play-centered" controls
           data-setup='{
            "plugins": {
                    "vastClient": {
                    "adTagUrl": "http://pubads.g.doubleclick.net/gampad/ads?sz=640x360&iu=/6062/iab_vast_samples/skippable&ciu_szs=300x250,728x90&impl=s&gdfp_req=1&env=vp&output=xml_vast2&unviewed_position_start=1",
                    "adsCancelTimeout": 3000,
                    "adsEnabled": true,
                    "preferredTech":"html5",
                    "vpaidFlashLoaderPath": "https://github.com/MailOnline/videojs-vast-vpaid/blob/RELEASE/bin/VPAIDFlash.swf?raw=true"
                }
            }}'
           width='640'
           height='400'
           data-viblast-key="N8FjNTQ3NDdhZqZhNGI5NWU5ZTI="
         >
         <source src="http://cdn3.viblast.com/streams/hls/airshow/playlist.m3u8" type='application/x-mpegURL'>
       </video>
    </body>

Here you can find a complete example.

Welcome to Viblast Documentation

Viblast Player with VAST for Video.js