For a large annual campaign, the implementation standard is much higher than for an ordinary promotional page. The team has to match the design precisely while also accounting for differences in phone models, network conditions, and operating-system versions.
Most smaller campaigns can use a static image at the top of the page. This time, however, nearly every header used motion. To keep compatibility reasonable and file sizes under control, the videos were generally delivered as MP4 files. Adding muted and autoplay to the <video> element allows the header video to start automatically, provided the WebView configuration supports autoplay. With the appropriate configuration, unmuted playback may also be possible.
During testing, an Android device briefly displayed a play button over one of the videos. The device was a Redmi phone, although its exact model was not recorded. The same page behaved normally on iOS devices.
The cause was Android WebView's default poster image. In previous campaigns, each video had a static header image assigned as its poster. Besides preventing the page from appearing blank while the video loaded, that image happened to hide the WebView's default behavior.
This time, the video dimensions and the static image dimensions did not match. The poster attribute was removed, and an image was placed behind the video instead. That change exposed the default poster—and its brief play-button overlay—on Android.
Set a poster on the video
The simplest fix is to provide a poster explicitly. An existing image can be used, but if no visible poster is needed, a transparent image is enough:
\n// 透明 base64\n<video poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />\n// or\n<video poster="https://via.placeholder.com/1x1" />\n// or\n<video poster="noposter" />\n
One detail is easy to miss: poster="" is ignored. An empty string does not prevent WebView from using its default poster, so the attribute needs to contain an actual image URL or another non-empty value.
Override the default poster in WebView
Adding a poster attribute to every video works, but it is repetitive and may be unnecessary when the application never wants to display a poster. A global solution is to override the WebView configuration through WebChromeClient:
\nclass MainActivity : AppCompatActivity() {\n // 重写 WebChromeClientCustomPoster 方法\n private class WebChromeClientCustomPoster : WebChromeClient() {\n override fun getDefaultVideoPoster(): Bitmap? {\n return Bitmap.createBitmap(10, 10, Bitmap.Config.ARGB_8888)\n }\n }\n override fun onCreate(savedInstanceState: Bundle?) {\n super.onCreate(savedInstanceState)\n setContentView(R.layout.activity_main)\n val myWebView: WebView = findViewById(R.id.webview)\n myWebView.webChromeClient = WebChromeClientCustomPoster()\n // 加载前端页面\n myWebView.loadUrl("https://mengke.me:9999")\n }\n}\n
Here, getDefaultVideoPoster() returns a small bitmap instead of allowing WebView to supply its built-in poster. Assigning the custom WebChromeClient to the WebView applies the behavior to videos loaded in that view, avoiding changes to every individual <video> element.