Viki HTML5 Player — Ads and Firefox Phone

น
llun
Published in
3 min readAug 20, 2016

--

It’s almost a year now that I started this project and last week, I just gave internal talk. It’s one of the project that I learn from it a lot including mistakes. Last year around this month, I see the old player which doesn’t have ads and think why we don’t add the ads. How hard can it be. I looked into video.js repository and see it has a lot of plugins including videojs-ima from Google and think maybe just give it a try and talked with my colleague and somehow got the project and started work with it half of my time.

It was going well in the beginning, get the sample “AdTagUrl” from google document page and it’s working until using our own “AdTagUrl” and all ads not showing at all. It’s very confusing until another colleague got another tag from Flash player project and the ads start showing. I thought ok, ads is working now and continue on the project, deploy to production and then this became my biggest mistake later.

Video Player in first month after started the project. It’s worked!

The ads is working and the first problem come in. It doesn’t work on Firefox OS Phone, the subtitle doesn’t show!

I founded out later that Firefox doesn’t support webvtt natively yet and in the desktop. Videojs is actually load webvtt.js script and use it parsing subtitle and render subtitle DOM manually. Which is ok on desktop but not on Firefox phone because the performance is very pour. First I tried disable ads. Ok this phone doesn’t have big market share anyway, so shouldn’t have problem for this but it still doesn’t help much. So in the end I have to disable all custom UI and only subtitle will get render and only in English and the UI on Firefox phone became like this.

Firefox phone, in the end only native control and subtitle getting show

And after that one month, Mozilla dropped the firefox phone supported.

It seems player is working fine and then my mistake from the ads is back after the Firefox is fixed. Ads revenue is going to just one video. I checked the adTagUrl and it’s already have video information but it’s actually have two video information! tried to remove one and cause the ads disappear. Again this made me have to come back and check all parameters for Google IMA.

From this document, the parameters that it required and sample is already shows in but one value that important is “sz” and this have to get from DFP and match to the setting in portal. If this value is different, the ads won’t show and this value is causing confusion because even the debug mode is enabled. There’s no error. Only the empty ads list file getting return.

Other value that we use and important is “cust_params” which provide additional information. If you have two key with the same name, the network behind that use key/value pair sometime will use only first one and this cause the big errors in the background. So hard lesson, check all parameters and feedback with other team first and in this case need time to check more than a week even it’s very small revenue earning but this might cause a big problem. And every parameters for the ads have to check don’t leave any duplicate in it.

From this point, the player is working fine, just one problem. It does’t look like Viki player yet. Will continue it next post.

--

--

น
llun
Editor for

Coder, mostly in Javascript/Typescript. Posting in https://llun.me