Ad insertion

Problem description

Working with video streams will probably lead you to insert advertisement in your application.

Proposed solution

PlayerService in Dana supports client-side ad insertion, like XML VAST, on multiple devices based on player capabilities.

To support ad-insertion,you will need, you can follow these steps.

First of all, you need to specify that the player session will need ad insertion capabilities.

this.playerService.getPlayerSession($PlayerSessionType.NON_LINEAR, true)

When launching a content, you can add an adUrl as an option to allow ad insertion.

this.playerService.setSource(playerSession, media, {
  adUrl: "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_ad_samples&sz=640x480&cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator="
});

Advertisement will be automatically played when needed.

Shaka player

For Shaka player use cases, you will need an extra library to support ad insertion. So when using @dana/vendor-shaka, you will also need to:

  • Copy ima.js library by modifying your Gruntfile.js as follows:
module.exports = function (grunt) {
  grunt.config.merge({
    copy: {
      ima: {
        files: [
          {
            expand: true,
            flatten: true,
            cwd: "./",
            src: ["node_modules/@dana/vendor-shaka/libs/ima.js"],
            dest: "<%= global.options.generatedDir %>/<%= global.options.libsDir %>/",
            filter: function () {
              return grunt.config("global.options.hasShaka");
            }
          },
          {
            expand: true,
            flatten: true,
            cwd: "./",
            src: ["node_modules/@dana/vendor-shaka/libs/ima_debug.js"],
            dest: "<%= global.options.generatedDir %>/<%= global.options.libsDir %>/",
            filter: function () {
              return grunt.config("global.options.hasShaka") && grunt.config("global.options.debug");
            }
          }
        ]
      }
    }
  });

  grunt.registerTask("_dev", function () {
    // Get tasks
    let tasks = this.options().tasks;

    tasks.splice(tasks.indexOf("bundle"), 0, "copy:ima")

    // Run tasks
    grunt.task.run(tasks);
  });

  grunt.registerTask("_package", function () {
    // Get tasks
    var tasks = this.options().tasks;

    tasks.splice(tasks.indexOf("bundle"), 0, "copy:ima")

    // Run tasks
    grunt.task.run(tasks);
  });
}
  • Add script tag in index.html.tpl
<% if(globalOptions.hasShaka) {%>
  <script type="text/javascript" src="<%= globalOptions.libsDir %>/Shaka.js"></script>
  <script type="text/javascript" src="<%= globalOptions.libsDir %>/ima.js"></script>
<% } %>
  • Add script tag in remoteHttpIndex.html.tpl
<% if(globalOptions.hasShaka) {%>
  <script type="text/javascript" src="<%= globalOptions.remoteUrl %>/<%= globalOptions.libsDir %>/Shaka.js"></script>
  <script type="text/javascript" src="<%= globalOptions.remoteUrl %>/<%= globalOptions.libsDir %>/ima.js"></script>
<% } %>
Edit this page on GitHub
Next
Application tracking privacy