Android-三星的HTML5视频未显示控件

Question

I'm currently working on an Android app with a WebView control, which has the following HTML snippet in it:

<video width="270" height="270" controls>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/>
</video>

On my LG Nexus 4 (Vanilla Android), this renders the video and the controls correctly (eg play, pause, full screen, etc), though when viewing on a Samsung Galaxy s4 and also a Nexus 10 (Touchwiz) tablet, the controls are displayed as red boxes (as in the screen shot below).

I've viewed the same page on Google Chrome and the controls render correctly, which leads me to believe something is different in Google chrome vs the WebView provided by Touchwiz

I've tried a number of options on the HTML 5 snippet, and also removing / adding the WebClient / WebChromeClient which are currently attached on the WebView, though none of the solutions seem to have worked.

The WebView is currently configured as below:

webView = (WebView)findViewById(R.id.newsletter_webview);
webView.loadUrl("http://example.com");

Thanks!

Answer 1

Not sure whether to delete the question or not, but found out the reason this was happening was due to a stylesheet on the page styling the and input[type=button] elements with border-radius and box-shadow styles - which are used to render the video player controls in the WebView - and which the WebView wasn't properly rendering.

Removing the styles seems to have fixed the problem, and brings the video player controls back to normal.