Problems with integration of html5 ima sdk into our player html5 player

[Hussain Badusha]

Hi

We've been in the process of integrating google IMA SDK for our html5 video player.

We've two problems which are persisting us all the way through.

1. Ad tags from "pubads.g.doubleclick.net" are working fine but if we take another

ad tag from some other sources like tremor video. It gives en error as follows

XMLHttpRequest cannot load http://demo.tremorvideo.com/proddev/vast/vast_inline_nonlinear.xml. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://imasdk.googleapis.com' is therefore not allowed access.

2. When we request an overlay, it renders the ad properly, but it holds access of

full ad container as it doesn't allow our video player to serve perfectly.

How do we rectify these?

Any help would be appreciable.

Thanks

Hussain Badusha

[Bret McGowen]

Hi Hussain,

1. The tremor video site is missing the HTTP headers for CORS (cross-origin-resource-sharing) that are needed. You can read more about this in our FAQ: Cross-Origin-Resource-Sharing (CORS) for VAST.  The Tremor video site probably doesn't set these headers because it's a test site. Most ad servers do have these headers correctly set.

2. I'm not sure I understand your question -- can you clarify or provide an example page?

Cheers,

Bret McGowen

IMA SDK Team

[Hussain Badusha]

Hi Bret

Thanks for the response.

Regarding the first question, we guessed it may the issue for not setting CORS promptly.

But we raised this query because, the same error occurs for few more sites. Here is the list,

http://ad.doubleclick.net/pfadx/N270.132652.1516607168321/B3442378.3;dcadv=1379578;sz=0x0;ord=79879;dcmt=text/xml

http://www.yazete.com/vast-data-1-31.xml?cb=98798

http://clients.weborama.nl/files/campaigns2/3739359098/41313/vasttag.xml

http://whoufm.com/dev/streaming/overlay.xml

By the way, if it is not a problem in our side. We just leave this issue as CORS has to be set correctly for those sites.

Regarding the second one.

We can't give you a page which illustrates our problem lucidly because we're working on localhost right now.

Let us put it in this manner.

<div id="video-player">

      <div id="adContainer"></div>

      <!-- Here, we'll create respective container and controls for the video player -->

</div>

Our player has got a container called "video-player"

To serve an ad (overlay ad), we put adContainer inside the parent container "video-player"

The adsManager loads perfectly and the ad displays promptly. 

But, the problem is this.

We can't pause or play or do anything on video player because adContainer occupies the full

space (width and height) over the video player.

You might want to say that you can try setting z-index in css. We just did it and it gives access for 

video player but disables access for the overlay ad (we can't click on overlay ad and it is not clickable)

We hope you understand our problem

We await you reply

Thanks

Hussain Badusha

[Bret McGowen]

Hi Hussain,

First issue -- you're right in that there's nothing that can be done on the video player or SDK side, it is a server CORS issue.

Second issue:

This can likely be solved with some HTML and style issues. Basically put the controls div below the AdDisplayContainer in the HTML and hide the controls when the ad is playing, and hide the controls when the ad is finished.

For example: (the following is based on our simple Flash integration example):

HTML

 <div id="mainContainer" onclick="console.log('click mainContainer');">

      <div id="content">

        <video id="contentElement">

          <source src="http://rmcdn.2mdn.net/Demo/vast_inspector/android.webm"></source>

          <source src="http://rmcdn.2mdn.net/Demo/vast_inspector/android.mp4"></source>

        </video>

      </div>

      <div id="adContainer"></div>

      <div id="playerControls" onclick="console.log('click playerControls');"

           style="position:absolute; bottom:0; height: 10px; width:640px; background-color:red;"></div>

    </div>

JavaScript

var controlsBlock = document.getElementById('playerControls');

...

...

function onContentPauseRequested() {

  controlsBlock.style.display = "none";

  ...

}

function onContentResumeRequested() {

  controlsBlock.style.display = "block";

  ...

}

The above code puts a red bar at the bottom of the video space that registers clicks and is hidden when an ad is playing.

Cheers,

Bret McGowen

IMA SDK Team

[Hussain Badusha]

Hi Bret,

We should have explained second issue bit more elaborate in the previous reply.

Here is likely no issue with player controls which will be placed at the bottom of the video player.

Hence, we could be able to use control bar to play or to pause or to manage volume or whatever we wish for.

But, we got to play or pause the video by clicking on the container of the video player particularly when 

the overlay ad is playing (not with linear). 

Here, you know exactly video player container is below the adContainer. So the click event for the container

of the video player is not getting triggered as adContainer occupies the space over the video player container.

This is where we've been struggling to find a way to get going on our integration to IMA SDK.

We hope that you understand our point of view on this issue.

Looking forward to your reply

Thanks

Hussain Badusha

[Bret McGowen]

Hi Hussain,

I may still not quite be understanding your issue, so if the following information doesn't resolve your issue then can you put up a test page on a server and post it (you can send via private message if you do not want to post publicly).

If I'm understanding, then you should listen for click events on the div that wraps both video player and ad container divs.

For example, in the simple integration app you could put the listener on "mainContainer" (or in your posted code, the "video-player" div).

HTML

<div id="mainContainer" onclick="handleClicks();">

JavaScript

var ignoreClicks;

function handleClicks() {

  if (ignoreClicks)

    return;

  // toggle video playback or whatever you need to do.

}

...

// This function is triggered on the SDK's CONTENT_PAUSE_REQUESTED event.

function onContentPauseRequested() {

  ignoreClicks = true;

  ...

}

// This function is triggered on the SDK's CONTENT_RESUME_REQUESTED event.

function onContentResumeRequested() {

  ignoreClicks = false;

  ...

}

[Hussain Badusha]

Hi Bret

Thank you very much for all your support.

We were listening to the element which is inside the mailContainer.

Now we change it from inner element to mainContainer.

This was the hitch that has been coming with us.

 

Now, it works like a charm.

Again Thanks,

Hussain Badusha

 

[Bret McGowen]

Hi Hussain,

You bet, glad you got it working!