Large Player: Direct Publisher Integration

StreamRail JavaScript SDK

A rich set of client-side functionality for adding video to your website, app, or SSP

Preview (VPAID2 HTML5)

The following snippet of code will provide the basic version of a StreamRail large player for premium publishers.

copy

<div id="ad-container1"></div>
<script>
  window.srAsyncInit = function() {
    SR('ad-container', {
      partnerID: 'your streamrail api key',
      muted: true,
      autoplay: true,
      hideContentBeforePreRoll: true,
      content: {
        linkUrl: 'http://www.streamrail.com/',
        url: 'https://www.streamrail.com/videos/new/bg.mp4'
      },
      ads: {
        schedule: [{
          position: 'pre-roll',
          server: {
 		    tag: 'https://ssp.streamrail.net/ssp/vpaid/569fa9ee5fbe690002000001/56a1422b5119450002000001?cb=[CB]&pos=[AD_POSITION]&width=[WIDTH]&height=[HEIGHT]&video_duration=[VIDEO_DURATION]&video_description=[VIDEO_DESCRIPTION]&video_url=[VIDEO_URL]&video_id=[VIDEO_ID]&video_title=[VIDEO_TITLE]&autoplay=[AUTOPLAY]&mute=[MUTE]&sr_format=js'
          }
        }]
      }
    });
  };
  (function(d, s, id){
     var js, srjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "https://sdk.streamrail.com/player/sr.ads.js";
     srjs.parentNode.insertBefore(js, srjs);
   }(document, 'script', 'streamrail-jssdk'));
</script>

Let's note a couple of things about this setup:

  • We have attached the player to a div on the page called ad-container1.
  • We have set muted: true to have the ad start muted.
  • We have set autoplay: true to have the ad start automatically.
  • We have set loop: true to have the ad and content video restart when the content video ends.
  • We have scheduled a pre-roll ad with a sample VAST tag (https://sdk.streamrail.com/demos/vast/vast.xml)
  • We have specified the content attribute, and supplied a linkUrl (activated on click), url (the URL of the content video) and a title (passed automatically to the ad server if there are ads. For example, "streamrail website" will be passed to LiveRail as LR_TITLE).
  • We have specified dimensions of 300x250 (banner size). If you leave width and height empty, the player would have occupied the space of its container (responsively).

Quickstart: StreamRail SDK for JavaScript

The StreamRail SDK for JavaScript provides a rich set of client-side functionality that:

  • enables you to play video on your site (MP4, HLS, DASH), on mobile, desktop, and native Android.
  • enables you to monetize your website using video ads with or without content. Supported ads are VAST (all versions), VPAID, VPAID2 (aka VPAID-JS or HTML5 VPAID), DFP, and Google IMA. All platforms are supported (web, mobile, and native).
  • enables you to leverage special capabilities that increase monetization: autoplay ads on mobile web (VAST), overcome browsers' Flash block on desktop, start playing the content, break in with ads when ready, and more.

This quickstart will show you how to setup the SDK and get it to implement some basic video scenarios. If you don't want to set up just yet, you can explore some examples first.

Basic Setup

The Streamrail SDK for JavaScript doesn't have any standalone files that need to be downloaded or installed. Instead, simply include a short piece of regular JavaScript in your HTML that will asynchronously load the SDK into your pages. The async load means that it will not block loading other elements of your page.

  • 1

    Prepare your settings.

    You will need your StreamRail API key (ask your account manager), a video to play (a link to an MP4 file would do), and an ad tag (e.g. VAST) if you would like to play ads.
  • 2

    Set up your page.

    You can attach the player to any div on your page by specifying its ID. This is the first parameter passed to the SR function. Alternatively, you can use a blank HTML page and let the player attach itself.
  • 3

    Configure the player.

    The above snippet of code will give the basic version of the SDK where the options are set to their most common defaults. You should insert it directly after the opening <body> tag on each page on which you would like it to load.