Introducing the IMA SDK Plugin for Video.js

A few weeks ago we announced the new Google Media Framework, which includes a Video.js plugin for HTML5. Today we’ll be diving a bit deeper into that plugin to show you how easy it is to do an IMA integration. Video.js is a JavaScript and CSS library that makes it easier to work with and build on HTML5 video. Combined with the IMA SDK plugin, the Video.js player becomes a fully integrated IMA SDK video player, and all in less than 10 lines of JavaScript!

Creating a player


You can create an IMA-integrated video player in 3 simple steps:

1. Download the video.js source and dependencies

  1. Grab the latest video.js player from videojs.com
  2. Grab the contrib-ads library from GitHub. 
  3. Grab the IMA plugin from our GitHub repo. 
Alternatively, if you’re an npm user, you can install our plugin and the above dependencies with
npm install videojs-ima

2. Declare your video player


Make sure your html file references the required JavaScript and CSS files downloaded in step one (see the example in the README for more complete HTML). Add the following code to load the IMA SDK and declare a video player:
<script type=“text/javascript” 
    src=“/imasdk.googleapis.com/js/sdkloader/ima3.js”></script>
<video id="content_video" class="video-js vjs-default-skin" controls> 
  <source src="YOUR_VIDEO_SOURCE" type="YOUR_VIDEO_TYPE" />
</video>
YOUR_VIDEO_TYPE is the encoding for your video. For more information on supported HTML5 video types, see this Wikipedia article.

3. Initialize the video player and IMA plugin


In a JavaScript block or separate JavaScript file, include the following code:
// Initialize the video.js player.
var player = videojs('content_video'); // your video tag’s id

// Declare options for the IMA plugin.
var options = {
  id: 'content_video',
  adTagUrl: 'YOUR_AD_TAG'

// Additional options available but not required.
// See our README for more info.
};

// Initialize the IMA plugin.
player.ima(options);

// Request ads.
player.ima.requestAds();

// Start video playback (will play ads if there is a pre-roll,
// content otherwise).
player.play();

With these few lines of code, you’ve got a complete video player with an IMA integration. For more information and additional documentation, see our GitHub repo README.

If you have any questions, feel free to contact us via the Google Media Framework forum.

 - , IMA SDK Team