, 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!
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.
