[Huawei Developers] Freemind R:
Introduction

In this article, I would like to introduce the latest addition to Huawei Ads Kit, Roll Ads.

Roll Ads is an ads that will play before the video or stream content can be consumed by the user, this leads to a smooth User Experience and is a good source of revenue for App Developers.

I will also introduce Video Kit, a video player kit that enables developer to develop a video player or streaming services in few simple steps.

Implementing Roll Ads

Please ensure you have created your app on AGC Console, and setup the HMS Core Plugin.

You can follow the guide here.

Lets add the ads dependencies:

implementation 'com.huawei.hms:ads-lite:13.4.33.300'

Next, we can init the ads from our Application class:

override fun onCreate() {
super.onCreate()

// init HMS Ads Kit
HwAds.init(this)
}

Lets add our Instream Ads View on our activity xml:

<RelativeLayout
android:id="@+id/instream_ad_container"
android:layout_width="match_parent"
android:layout_height="200dp"
android:visibility="visible">

<!-- Roll ad view. -->
<com.huawei.hms.ads.instreamad.InstreamView
android:id="@+id/instream_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</RelativeLayout>

To test our Ads, we can use the dedicated roll ads slot id: "testy3cglm3pj0"

val builder = InstreamAdLoader.Builder(this, "testy3cglm3pj0")

And we can set our ads as below

val adloader = builder.setTotalDuration(30)
.setMaxCount(1)
.setInstreamAdLoadListener(object : InstreamAdLoadListener {
override fun onAdFailed(p0: Int) {
}

override fun onAdLoaded(p0: MutableList<InstreamAd>?) {
instream_view.setInstreamAds(p0)
}

}).build()

adloader.loadAd(AdParam.Builder().build())

After setting up all this, you should be able to run the app and you will see a roll ads being played.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/000/001/363/0890065000000001363.20201113091434.30906453988095770494916827084009:50511125015550:2800:3E7D97BDEF537124282DB4B54A4C133CA21C1E8FBA54CD85B8B603AD33C669D0.gif"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/000/001/363/0890065000000001363.20201113091434.30906453988095770494916827084009:50511125015550:2800:3E7D97BDEF537124282DB4B54A4C133CA21C1E8FBA54CD85B8B603AD33C669D0.gif[/IMG]

Implementing Video Kit

Now lets add Video Kit dependencies to our build.gradle

implementation "com.huawei.hms:videokit-player:1.0.1.300"

We can initialize our video kit (wise player) in Application class as well, like so:

First, let's add a reference for our wisePlayerFactory

companion object {
lateinit var wisePlayerFactory: WisePlayerFactory
}

We can initialize the object on Application Create:

private fun initPlayer() {

// DeviceId test is used in the demo, specific access to incoming deviceId after encryption
val factoryOptions = WisePlayerFactoryOptions.Builder().setDeviceId("test-device1").build()
WisePlayerFactory.initFactory(this, factoryOptions, initFactoryCallback)
}

override fun onCreate() {
super.onCreate()
HwAds.init(this)
initPlayer()
}

Lastly, we need create the callback and getter/setter for our wisePlayerFactory

private val initFactoryCallback: InitFactoryCallback = object : InitFactoryCallback {
override fun onSuccess(wisePlayerFactory: WisePlayerFactory) {
setWisePlayerFactory(wisePlayerFactory)
}

override fun onFailure(errorCode: Int, reason: String) {
}
}

fun getWisePlayerFactory(): WisePlayerFactory? {
return MyApplication.wisePlayerFactory
}

private fun setWisePlayerFactory(wisePlayerFactory: WisePlayerFactory) {
MyApplication.wisePlayerFactory = wisePlayerFactory
}

On our activity xml, we need to create SurfaceView to be attached to our WisePlayer

<FrameLayout
android:id="@+id/frame_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone">

<SurfaceView
android:id="@+id/surface_view"
android:layout_width="match_parent"
android:layout_height="200dp" />

</FrameLayout>

Combining the two

Now that we have both kits setup, lets combine them.

We will only start the video once the ads is finished displayed.

Let's add a listener to our Instream Ads so that we know once the ads is finished playing

instream_view.setInstreamMediaStateListener(object : InstreamMediaStateListener{
override fun onMediaPause(p0: Int) {
}

override fun onMediaProgress(p0: Int, p1: Int) {
}

override fun onMediaCompletion(p0: Int) {

// Initialize our video player
player = MyApplication.getWisePlayerFactory().createWisePlayer()

// video will be played once the video is ready to load the data
player.setReadyListener {
player.start()
}
player.setVideoType(0);
player.setBookmark(10000);
player.setCycleMode(1);

// set the video to play
player.setPlayUrl("http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4")
player.setView(surface_view);

// initiate video loading
player.ready()

// hide the ads container, and show the video player
instream_ad_container.visibility = View.GONE
frame_layout.visibility = View.VISIBLE

}

override fun onMediaError(p0: Int, p1: Int, p2: Int) {
}

override fun onMediaStart(p0: Int) {
}

override fun onMediaStop(p0: Int) {
}

})

Once you combined the two, you will see the stream/video will be played after the ads finished loading:

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/000/001/363/0890065000000001363.20201113092752.05141800364834405891025853493936:50511125015550:2800:C89C22B8A7AF6752B02DB8545D3F3EE7A4221848F1747EC7206E1F04490EEFF2.gif"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/000/001/363/0890065000000001363.20201113092752.05141800364834405891025853493936:50511125015550:2800:C89C22B8A7AF6752B02DB8545D3F3EE7A4221848F1747EC7206E1F04490EEFF2.gif[/IMG]

Tips & Trick

Do ensure that your instream view and wise player view size is similar, to provide a much better viewing experience for the user.

You cann add a skip button on the Roll Ads that will be only enabled after a certain time (for example 5 secs) so that the user can jump to the content after 5 sec of ads.

Conclusion

From this article, I hope this will help you to understand how to integrate our Roll Ads as well as Video Kit.

As you can see, implementation is very straight forward, I hope you guys can give it a try.

Do left a comment if you have any suggestions/questions.

Thank you!

Reference

Roll Ads - https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/publisher-service-instream-0000001058253743

Video Kit - https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides-V5/init-player-0000001050199407-V5 and

https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/basic-play-process-0000001050197362