IMA SDK v3 for Video.js

[Stefan Vesper]

I am trying to start a preroll with no sound. 

setVolume(0) works fine, but the controlbar´s CSS is not correct. 

The mute-button and the volume-slider still have the "unmuted" css. I also have to click the mute-button twice to get the sound unmuted and vice versa. I need to toggle the mute state properly it seems.

What am I doing wrong here? Any suggestions?

Thank you! Steve

[Vu Chau (IMA SDK Team)]

Hi Steve,

If you are in control of the video player, simply adjust the CSS of the player's controls yourself so that they are in sync with the current volume state.  I don't think programmatically muting the ad will have an effect on the player's UI.  That has to be something that needs to be implemented manually, which we leave to the publisher because not all video players employ the same set of UI controls.

Vu Chau

IMA SDK Team

[Stefan Vesper]

Hey Vu,

thanks for your reply. I did change the css on adsready so the look was ok, but the functionality of the controls is kind of inverted then. I have to make 2 clicks to unmute and the on/off state of the button is not matching. 

I have another problem with setting the volume of the ad. After the adsready-event, I tried to set the volume of the ad by typing: 

videojs('myplayer').ima.adsManager.setVolume(0); 

The console says: "Uncaught TypeError: Cannot read property 'setVolume' of undefined(…)"

Can you help here, too? 

I am kind of newbie when it comes to oop and struggling with the details.. 

thanks in advance!

Steve

[Vu Chau (IMA SDK Team)]

Hi Steve,

I'll walk you through with our IMA for VideoJS sample. First, go to videojs.ima.js.  Put a breakpoint at this.adsManager.start() (line 312).  Then, start the ad.  The browser will break at line 312, allowing us to enter our custom scripts in the console.

Enter var adsManager = this.adsManager; followed by adsManager.setVolume(0); in the console and hit Enter. Then, resume your script execution (F8 if you are on Chrome). The change should now take effect.

Vu Chau

IMA SDK Team

[Stefan Vesper]

Hi again, 

and thank you very much for the walk-through! Works fine for me so far. 

But where should I make the "real" edits then? would you recommend to edit the original videojs.ima.js ?! 

I am sure it is totally wrong but right now I am trying (after loading all scripts and css):  

videojs('im_video').on("adsready", function(){
    videojs('im_video').ima.adsManager.setVolume(0);
    videojs('im_video').ima.addEventListener(google.ima.AdEvent.Type.COMPLETE, function()       {
     console.log(">>> ad complete");
    });
});

Also, on your sample-page, there is the strange behaviour with the css after changing the volume by console. 

Controls still have the "volume on" styles, but as you said, this should be fixed by myself. But I would still have to click twice to unmute and have the wrong icon every 3rd click. 

Cheers,

Steve

[Vu Chau (IMA SDK Team)]

Hi Steve,

Sorry that I thought you were fiddling with the console rather than inlining the change.

You will still be using videojs.ima.js.  Go to onAdStarted_ (line 451), which signifies the beginning of ad playback.  Here you can set the volume, by using this.adsManager.setVolume(0).  The reason the console is saying "undefined" is probably the SDK isn't grabbing an instance of your adsManager under adsready (probably because it is still too early in the workflow). 

Adjusting the player's UI controls as per the state of your ad is completely at the developer's level.  What happens is, when you call setVolume(), the SDK will dispatch an internal event to change the volume of the ad, without the video player's knowledge.  You can grab this event and change the UI of the control yourself.  The only use case where video controls and SDK work in sync is when you change the volume directly from the control (i.e. the volume slider).  There is code in place that listens to the volume slider and adjusts the volume accordingly.  When you programmatically mute the ad, clicking on the volume icon to turn it to a "mute" state creates a duplicate setVolume(0), which has already been executed with your programmatic mute call.  That explains why you need an additional click to unmute the ad, because at this time the same JS that listens to the volume slider will get called to unmute it. 

Let me know if you have any questions,

Vu Chau

IMA SDK Team

[Stefan Vesper]

Hey,

that was quick, awesome support, thank you so much! 

I will try and go through this now and get back with the results. 

Thanks again, 

steve

[Stefan Vesper]

Hey! 

Thanks again, everything is working fine now, your explanations started some kind of "ahaa" in my head. :-) 

One last question: 

Which combination of versions are best regarding Videojs /Ima Sdk /Contrib-ads? 

What would you prefer? 

btw. I had to add the event "adplaying" in the videojs.ima.js after updating contrib-ads to the latest version (4.0) 

Cheers,

Steve

[Vu Chau (IMA SDK Team)]

Hi Steve,

Glad to be of help! 

We actually support only the IMA plugin for VideoJS so we won't be able to comment on what the best combination of versions might be.  If you choose to, you can ask that on our GitHub issue tracker, and Shawn (the author of the plugin for VideoJS) from our team will be able to provide more information.

Vu Chau

IMA SDK Team