googleads / videojs-ima

IMA SDK Plugin for Video.js
Apache License 2.0
450 stars 284 forks source link

styling problem across ads and player #911

Closed spormeon closed 4 years ago

spormeon commented 4 years ago

Hi

There seems to be some sort of styling problem, on first load, one 'set' of controls appears for about a second (while ads being fetched i'd guess), they then disappear and the ad plays with a different set/ style of controls, then when you get to the content video a different set of controls appears, so it looks inconsistent. How can you make all these the same, so as there is consistency?

this is in the examples autoplay thanks

Kiro705 commented 4 years ago

Hello @spormeon ,

There are two main issues being described here.

First, the autoplay example is built off of the other examples which require a click to start. Because of this, the videoJS start button is briefly visible. If in your own implementation, you know the video will autoplay, you can hide the videoJS start button while preroll ads are loading.

Secondly, the styling between the ad controls and content controls is different in the example. If you would like to edit the ad controls style, please see the plugin's css file here. If you would like to edit the videoJS player's style, please see this tutorial on editing videoJS styles.

Please let me know if you have any questions, Thank you Jackson

spormeon commented 4 years ago

Hi Jackson, Thanks for the info. Can't you change the ima.css, so as it mimics the default videojs ones, most people are going to basically just stick with the default and if they don't, they then least have files that mimic each other and only need to change a few variables, rather than re-write the whole things, which is what this looks like it needs

this is the first one i see: Screen_Shot_2020-07-07_at_11_24_49

then the default player controls on "content":

Screen_Shot_2020-07-07_at_11_26_03

spormeon commented 4 years ago

We are having 2 skins where one is default content video skin and another is advert video skin but during the initial load, for some reason, content video skin runs for a second and then replaces with advert skin, once done, it again runs content video skin.

Kiro705 commented 4 years ago

I believe it will be difficult to prioritize matching the plugin's ad css to the videoJS default css. This is because, the focus of the plugin is to have IMA functioning with videoJS, and most implementations of the plugin will be changing the css match the specific sites specifications.

In terms of the video skin being visible while ads are being loaded, my recommendation would be to not display the content video, until the ads have finished loading and it can be determined if content or pre-roll ads will play first.

spormeon commented 4 years ago

i think it might be this and its still not fixed? https://github.com/googleads/videojs-ima/issues/558

Kiro705 commented 4 years ago

558 was resolved by adding preventLateAdStart. Setting preventLateAdStart to true prevents ads from playing after a ad load timeout occurred (defaults to 8 seconds of ad trying to load).

Based on my understanding, your ads are loading and play after ~1 second, and during the load time content is not playing. Again, my recommendation would be to not show the content player until the ads have finished loading and it can be determined if content or pre-roll ads will play first.