background

A few days ago to do a demand community article if it is a video type, need to play video preview GIF in the article list.

Here we use the service of the video department to generate a preview of the video. The available formats are webP, MP4, FLV and HLS. The last three are all video formats, which definitely cannot be used as preview images. So the WebP format was chosen.

Fresco method for loading giFs

val uri = Uri.parse("http://voddafz06jj.vod.126.net/voddafz06jj/videoPreview_1821338293_IQAB9DSR.webp")
val controller = Fresco.newDraweeControllerBuilder()
        .setUri(uri)
        .setAutoPlayAnimations(true)
        .build()
drawee_view.controller = controller
Copy the code

It seems that there is no problem, but when the development is finished and I show it to the product, the product is not happy with it. Why can this GIF only play once? I need to play it in a loop.

The original WebP GIF can be set the number of cycles, I asked my colleagues in the video department, it turned out that the preview they generated did not set the properties of the cycle playback, the pit.

And the video department also needs to schedule to support the loop property of preview images, so the product can only be told this, and the product is still not satisfied, “I don’t care, I will play the loop indefinitely!”

We’ll just have to bite the bullet

Communities looking for Help

Sure enough, a similar problem was found

Github.com/facebook/fr…

emm.. Problems but this guy is the cycles of the picture is 1, but the use of fresco “infinite loop, and the man is using a GIF dynamic figure, it’s embarrassing, but these are not important, the fundamental problem is consistent, is imposing figure of plays, to continue to look down, find a thumb up for more answers

Give it a try, Nani. Why is it still only once?

On closer inspection, this guy’s version is 0.10.0 and the version we’re using is 1.2.0, so it looks like Fresco changed the code

MLoopCount Loops loops loops loops loops loops loops

Change the code quickly and try again. It worked this time

In the code

val uri = Uri.parse("http://voddafz06jj.vod.126.net/voddafz06jj/videoPreview_1821338293_IQAB9DSR.webp")
val controller = Fresco.newDraweeControllerBuilder()
        .setUri(uri)
        .setAutoPlayAnimations(true) .setControllerListener(object : BaseControllerListener<ImageInfo>() { override fun onFinalImageSet(id: String? , imageInfo: ImageInfo? , animatable: Animatable?) { try {if (imageInfo is CloseableAnimatedImage) {
                        val animatedImage = imageInfo.image
                        if (animatedImage is WebPImage) {
                            if(animatable ! = null) { val field = AbstractAnimatedDrawable::class.java.getDeclaredField("mLoopCount")
                                field.isAccessible = true
                                field.set(animatable, Integer.MAX_VALUE)
                            }
                        }
                    }
                } catch (e: Throwable) {
                    e.printStackTrace()
                }
            }
        })
        .build()
drawee_view.controller = controller
Copy the code

The infinite loop is set only for WebP images to avoid affecting GIF images.

conclusion

We ran into a problem with fresco loading webp giFs that could not control the number of times they were played. With the help of the community, we changed the number of times through reflection, due to version differences, looked at the source code changes, and finally solved the problem.

But this is only a temporary solution, and it only works for certain versions, in case Facebook changes the code one day and our solution doesn’t work. Still need to follow the specification, generate support loop playback webP GIF.

In fact, today’s article is more to express a way to solve the problem, I hope to be useful to you.

The Brief Book of Migrating Self 2018.08.02