Uncaught TypeError: window.outstreamPlayer is not a function

[ocm-peter]

Hello,

I'm trying to use the prebid-outstream player with the below configuration.

media_types.video.renderer = {
    url: '//cdn.orangeclickmedia.com/tech/libs/ocm-renderer.js',
    render: function (bid) {
        try {
            setTimeout( function() {
                // Object to configure the behaviour of outstream renderer from HTML page.
                var obj = {
                    width: media_types.video.playerSize[0],
                    height: media_types.video.playerSize[1],
                    vastTimeout: 5000,
                    maxAllowedVastTagRedirects: 3,
                    allowVpaid: false,
                    autoPlay: false,
                    preload: true,
                    mute: false,
                    adText: 'OCM Advertising'
                }
                // Call to Global object of renderer.
                // Takes bid, element ID and configuration object as parameters
                var adDiv = document.querySelector('[oau-code="' + bid.adUnitCode + '"]')
                if (adDiv) {
                    adDiv = adDiv.id;
                }
                window.outstreamPlayer(bid, adDiv , obj);
            }, 3000)
        } catch (e) {
            console.error(e);
            console.error("Error in ad rendering!");
        }
    }
};

The bid is won by openx (a test bid) with the below response:

{
   "vastUrl":"https://ocmdigitalmedia-d.openx.net/v/1.0/c?colo=https://ox-delivery-prod-europe-west3.openx.net&ph=3da0de1d-b4a8-4cbd-9d58-8d6ed130adaa&ts=2DAABBgABAAECAAIBAAsAAgAAAA0cPBYAFgAAAExGAAAAAA",
   "pub_rev":"1000",
   "width":"",
   "height":"",
   "pixels":"https://eu-u.openx.net/w/1.0/pd?plm=6&ph=3da0de1d-b4a8-4cbd-9d58-8d6ed130adaa",
   "currency":"USD",
   "adid":"",
   "deal_id":""
}

OpenX explicitly told me that they do not have their own renderer, so a custom renderer should be used.
Unfortunately, I get the error stated in the issue title.

Any feedback would be appreciated.

A url to check would be here: https://www.squawka.com/en/liverpool-0-0-manchester-united-player-ratings-thiago-shaw-fabinho-firmino?ocmpbjs_debug=true

Scroll down a bit, to lazy load the outstream ad unit.

Best,
Peter

[jbartek25]

No timeout or other workaround is needed. There's a renderer queue for that exact purpose that the player may not be loaded when the render function gets invoked. All you need is put the relevant parts or entire body of the render function in the renderer queue like this:

render: function (bid) {
  bid.renderer.push(function () {
    ...
    window.outstreamPlayer(bid, adDiv , obj);
  });
}

[ocm-peter]

Thank you both for chipping in.

Unfortunately the error remains the same, but in a different way.

prebid.js:3 Prebid ERROR: Error processing Renderer command:  ReferenceError: outstreamPlayer is not defined
    at ocm.js:3
    at i.process (prebid.js:3)
    at Array.callback (prebid.js:3)
    at prebid.js:3
    at HTMLScriptElement.readyState.n.onload (prebid.js:3)

I tried with both window.outstreamPlayer and outstreamPlayer

Visit
https://www.squawka.com/en/southampton-1-3-arsenal-match-analysis-winners-losers-saka-lacazette-holding-arteta

and set

ocmpbjs.setConfig({debug: true})

in the console before scrolling (they have some issues with the query parameters, so ?ocmpbjs_debug=true won't work).

@agammathur the thing is that outstreamPlayer is never to be found through the console, even after a much longer period of time. So, definitely it's not a timing issue.

Thank you again for your feedback.

[jbartek25]

If window.outstreamPlayer never exists then it looks like the player failed to initialized. You should turn on the player logs and inspect https://github.com/prebid/prebid-outstream#Run

[ocm-peter]

@jbartek25 I already hard coded the default log to 5 after my last failed attempt.
There is nothing printed in the console, unfortunately.

This is my built renderer https://cdn.orangeclickmedia.com/tech/libs/ocm-renderer.js

[jbartek25]

Turn off safeframe. The player normally needs to jump out of Google iframe and needs a friendly iframe to do so.

[ocm-peter]

That's a good catch @jbartek25.

I'll have a look at it and come back.

[ocm-peter]

Hello again,

@jbartek25 this is what I got with FriendlyFrame

On my safeFrame line items, I use the PUC, on the non safe frame ones, I'm using the one appearing on the ss above.

Any thoughts?

Tia

[jbartek25]

@ocm-peter I took a look but you have your own JS wrapper around Prebid and it's hard for me to see what's going on. I suggest you start with vanilla Prebid test page with outsteam player and work out the difference between what your custom script is doing and what the test page does. Sorry can't help you.

[mike-chowla]

@ocm-peter I think I figured out the issue

This line:

window.outstreamPlayer(bid, adDiv , obj);

should be

outstreamPlayer(bid, adDiv , obj);

Unlike Prebid.js, the outstream player is currently not creating a global object. outstreamPlayer is constructor and not an object.

I don't like this setup and think we should change the code so there is a global object.

[ocm-peter]

@mike-chowla unfortunately that won't work either.

I'll try and expose the outstreamPlayer globally and get back with, hopefully, a PR.

[ocm-peter]

Just noticed that the local test build runs with prebid v3.23, while I am using v4.23.

Anyone aware of any major changes to the outstream rendering from v3 to v4?

[muuki88]

I guess this issue was closed with the mentioned PR