preface

I haven’t written for some time. This is because I have been working in a new department recently. I have learned a lot during this time, but my working hours in the company have skyrocketed.

The main content of the new department is the development of customized activities on mobile terminals, which is oriented to C-terminal users. It involves a wide range of knowledge points, which were only used to face to face, but now it is really used.

For an S-class activity, it is necessary to consider the user’s model and network situation, so as to carry out code adaptation and optimization (performance indicators of active pages are very important), establish a complete monitoring and reporting system, use JS Bridge to call native capabilities, and rewrite UI components and business logic for each development……

This article is mainly about the pit I stumbled into when using the

Video Strange ‘Play button’ appears in WebView of Android phone

It all started when I needed to play a.MP4 video in the WebView, and of course I wanted to use the

The test code is as follows:

<style>
  video {
    border: 2px solid #ff4040;
  }
</style>
<video id="video">
  <source
    src="https://cdn.baobangdong.cn/SampleVideo_360x240_1mb.mp4"
    type="video/mp4"
  />
</video>
Copy the code

It’s normal on the iOS WebView.

But the Android WebView shows the following:

I find that there is a picture like “play button” floating above the video, which only appears when the video is loaded for the first time and then disappears after playing once. What’s the matter?

This is the default behavior of Android WebView. The root cause is that

Here are two ways to approach the problem from different perspectives.

Note: Never test in a browser, because webViews are related to browsers, but not identical. If you test in a browser, you’ll find that

If you want to serve a Web application (or just a Web page) in a client application, you can do this using a WebView. The WebView class is an extension of the Android View class that lets you display web pages as part of your Activity layout. It won’t include any of the features of a full-featured Web browser, such as navigation controls or an address bar. WebView displays only web pages by default.

The following is the WebView implementation in Mi 10 developer mode:

The front view

From the front end’s point of view, all we can control is the

Add the Poster attribute for video

The method is simple: set the poster attribute of

  • Video loading
  • The video is loaded but does not play
  • End of video

For example, poster = “https://via.placeholder.com/1×1” or poster = “noposter”

Note that a null value will be ignored for poster=””, so assigning an empty string is useless.

Native (client) perspective

Speaking of the front end perspective, in the “big front end” trend, we start from the client perspective (here mainly refers to Android), it is also good to learn some Java (Kotlin) language, the so-called technology is not heavy body.

Override the getDefaultVideoPoster() method for WebChromeClient

I developed using Android Studio with Kotlin, AVD is Pixel XL API 30.

With reference to specific document WebChromeClient | getDefaultVideoPoster.

The code looks like this (mainactivity.kt) :

class MainActivity : AppCompatActivity() {

    / / rewrite WebChromeClientCustomPoster method
    private class WebChromeClientCustomPoster : WebChromeClient() {
        override fun getDefaultVideoPoster(a): Bitmap? {
            return Bitmap.createBitmap(10.10, Bitmap.Config.ARGB_8888)
        }
    }

    override fun onCreate(savedInstanceState: Bundle?). {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val myWebView: WebView = findViewById(R.id.webview)
        myWebView.webChromeClient = WebChromeClientCustomPoster()

        // Load the front-end page
        myWebView.loadUrl("http://10.94.62.121:5000")}}Copy the code

Before overriding the method:

After overriding the method:

You’re done, and you’ve solved the problem at its root by modifying the native code.

Reference

  • video – MDN
  • stackoverflow – HTML5 video remove overlay play icon