npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

videojs-ima-fem

v0.2.0

Published

##Introduction The IMA SDK Plugin for Video.js provides a quick and easy IMA SDK integration for the Video.js player.

Downloads

6

Readme

#IMA SDK Plugin for Video.js

##Introduction The IMA SDK Plugin for Video.js provides a quick and easy IMA SDK integration for the Video.js player.

The framework is currently in beta, allowing interested developers to try it out and send feedback before we finalize the APIs and features.

To see the plugin in action, check out our samples.

##Features

  • Easily integrate the Google IMA SDK into Video.js to enable advertising on your video content.

##Requirements

  • Your favorite text editor
  • A JavaScript enabled browser

##Getting started The easiest way to get started is by using npm.

npm install videojs-ima

If you don't use npm, you can download the source from the src/ folder and include it directly in your project. You'll also need to download the source for the videojs-contrib-ads plugin.

In your index.html file, create a new video.js player and load a (currently empty) javascript file:

<html>
  <head>
    <!-- Load dependent stylesheets. -->
    <link href="//vjs.zencdn.net/4.5/video-js.css" rel="stylesheet">
    <link rel="stylesheet" href="path/to/videojs.ads.css" />
    <link rel="stylesheet" href="path/to/videojs.ima.css" />
  </head>

  <body>
    <video id="content_video" class="video-js vjs-default-skin"
        controls preload="auto" width="YOUR_VIDEO_WIDTH" height="YOUR_VIDEO_HEIGHT">
      <source src="PATH_TO_YOUR_CONTENT_VIDEO" type="YOUR_CONTENT_VIDEO_TYPE" />
    </video>
    <!-- Load dependent scripts -->
    <script src="//vjs.zencdn.net/4.5/video.js"></script>
    <script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
    <script src="/path/to/videojs.ads.js"></script>
    <script src="/path/to/videojs.ima.js"></script>
    <script src="player.js"></script>
  </body>
</html>

In player.js, load the ads library and set up the IMA plugin:

var player = videojs('content_video');

var options = {
  id: 'content_video',
  adTagUrl: 'YOUR_AD_TAG'
};

player.ima(options);
player.ima.requestAds();
// On mobile devices, you must call initializeAdDisplayContainer as the result
// of a user action (e.g. button click). If you do not make this call, the SDK
// will make it for you, but not as the result of a user action. For more info
// see our examples, all of which are set up to work on mobile devices.
// player.ima.initializeAdDisplayContainer();
player.play();

That's all there is to it!

Additional settings

The plugin accepts additional settings beyond the two required settings shown in the previous snippet. A summary of all settings follows:

{
  id: <string> REQUIRED The id of your video player
  adTagUrl: <string> REQUIRED A URL which returns a VAST response
  adsRenderingSettings: <Object> JSON object with ads rendering settings as defined in the IMA SDK Docs(1).
  debug: <boolean> True to load the debug version of the plugin, false to load the non-debug version. Defaults to false.
  locale: <string> Locale for ad localization. This may be any  ISO 639-1 (two-letter) or ISO 639-2 (three-letter) code(2). Defaults to 'en'.
  nonLinearWidth: <Number> Desired width of non-linear ads. Defaults to player width.
  nonLinearHeight: <Number> Desired height for non-linear ads. Defaults to 1/3 player height.
  showCountdown: <boolean> Whether or not to show the ad countdown timer. Defaults to true.
  vpaidAllowed: <boolean> Whether or not to allow VPAID ads. Defaults to true.
}

(1) IMA SDK Docs (2) Valid locale codes

##Where do I report issues? Please report issues on the issues page.

##Terms of Service The IMA SDK plugin for Video.js uses the IMA SDK, and as such is subject to the IMA SDK Terms of Service.

##Support If you have questions about the framework, you can ask them at //groups.google.com/d/forum/google-media-framework

##How do I contribute? See CONTRIBUTING.md for details.

##Authors

  • [email protected] (Shawn Busolits) Please direct questions or bug reports to the Github issues page.