HTML5 video remove overlay play icon - android

How do I remove the overlay play icon (triangle) that's visible in the center of the video for a second or so every time a video starts playing in an Android WebView?
Thanks in advance!

If you said about this picture
This is picture I had when tested my app on Android 6.0.
You can hide this picture. For example:
WebView mWebView = (WebView) findViewById(R.id.web_view);
mWebView.setWebChromeClient(new WebChromeClientCustomPoster());
Chrome client class:
private class WebChromeClientCustomPoster extends WebChromeClient {
#Override
public Bitmap getDefaultVideoPoster() {
return Bitmap.createBitmap(10, 10, Bitmap.Config.ARGB_8888);
}
}
More info read api

I found a solution.
Just add the 'poster' attribute.
e.g. poster="https://via.placeholder.com/1x1" or poster="noposter"
Note: Empty value are ignored. (poster="")

Neither poster="noposter" nor poster="null" work for me.
I made it work by creating a placeholder image that has just a white background color and assigned it to the video per DOM.
document.getElementById("myVideo").poster = "noposter.png";

Please note that setting poster to an invalid URL (such as "noposter") might trigger a network call and an error event from the video player.
In my projects, I'm setting the poster to a tiny transparent GIF:
poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"

Related

Android WebView gray play button

I am using the HTML5 video element for playing video in the Android WebView. And this works great for me but the only problem with using this is that the video element automatically a gray play button adds.
I've tried searching for an API and could not find anything that helps my case. I also tried using CSS with the following style:
video.mobile_controls::-webkit-media-controls-fullscreen-button
{
display: inline !important; // Also used "display:none"
}
Further i tried poking in the shadow dom but i couldn't find anything related to this.
So the question is how do i remove this gray button.
Here is an image for reference:
The issue is the video poster. But there's a better way of fixing this by extending from the WebChromeClient and overriding the getDefaultVideoPoster();
Here is the solution:
import android.graphics.Bitmap;
import android.webkit.WebChromeClient;
public class WebChromeClientCustomPoster extends WebChromeClient {
#Override
public Bitmap getDefaultVideoPoster() {
return Bitmap.createBitmap(10, 10, Bitmap.Config.ARGB_8888);
}
}
And then using this client instead by doing:
WebChromeClientCustomPoster chromeClient = new WebChromeClientCustomPoster();
mWebView.setWebChromeClient(chromeClient);
After some dirty hacks we found that misusing the poster attribute fixed this issue. We resolved this issue by doing the following:
videoElement.setAttribute("poster", "nope");
The video element will use the value "nope" as its poster. And because nope is not a valid URL the video element will not replace the poster and will not show a poster.
Our team had tried to solve the same issue for a while too. What ultimately worked for us is setting this setting on the WebView webView.settings.mediaPlaybackRequiresUserGesture = false. Hope it helps others running into this too.

Android HTML5 Video in Fullscreen Mode

I'm trying to get my video stream to work on android in fullscreen mode. For iOS I use a native <video> tag, which works perfectly.
I can play the video on my android, but I don't have a fullscreen button. I also tried to create a own template for the android devices and simply set the width and height of the player to the window size (Fake Fullscreen). The problem I have here is, that when I rotate the device, the resize doesn't work correctly, so that i can scroll over the video.
Heres what I tried:
$(document).ready(function() {
$(window).on('resize orientationchange', function() {
$('#myPlayer').width( $(window).width() ).height( $(window).height() );
});
}
Can anyone help me to get this to work on Android?
I hope you can understand my question, my english isn't that good ...
HTML5 video full screen on mobile browsers (android)
seems the same question.
The events you need are: webkitbeginfullscreen (enter fullscreen) and webkitendfullscreen (exit fullscreen)
var player = document.getElementsByTagName("video")[0];
player.addEventListener('webkitbeginfullscreen', onVideoBeginsFullScreen, false);
player.addEventListener('webkitendfullscreen', onVideoEndsFullScreen, false);

WebView disappears when I click on an embedded link

I've done alot of Googling on this and haven't found an answer. I have a webview as part of an overall layout with other controls. I use the webview to show formatted text (recipe descriptions with bold and italic fonts) and URLs. The URLs point to Youtube and are fully qualified (ie. http://www.youtube.com/watch?v=fyzyhuVgzRE). When I click on the link in my web view, the web view control itself disappears from the layout (leaving the rest of the controls on the page intact) and the default web browser does not launch.
It behaves as if I've set the visibility of the web view to GONE, but I do not manipulate the visibility of any of the controls on the layout.
One interesting clue in the LogCat output is an INFO level message from the OS:
MotionRecognitionManager .unregisterListener : / listener count = 0->0,
listener=android.webkit.ZoomManager$1#41ac2fc0
Any ideas what would cause this behavior?
EDIT
Here is how I setup the webview in the onCreate() method of the activity:
webView1 = (WebView)findViewById(R.id.webView1);
webView1.getSettings().setJavaScriptEnabled(true);
webView1.getSettings().setAllowFileAccess(true);
webView1.setWebViewClient(new MyWebViewClient());
And the MyWebViewClient class:
private class MyWebViewClient extends WebViewClient {
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url != null && url.startsWith("http://")) {
view.getContext().startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url)));
return true;
} else {
return false;
}
}
}
Oddly enough the shouldOverrideUrlLoading is never called.
Well, I'm a dope. It turns out that the double quotes in the href attribute of the anchor were doubled. My system integrates with a MySQL db over the web and I have to do alot of transformation of data between MySQL/PHP and Android/SQLite. During one of these transformations I double-escaped the quotes in the href. So what should have been:
Link Text
was instead rendered as:
Link Text
In the web view the resulting URL looked fine. It was underscored properly and looked like any other URL. It is odd though that simple doubling the quotes causes the behavior. I'll see if there is a known bug like this for Android. At the very least the WebView should through some kind of exception, not simply disappear from the screen.
I faced this type of behavior when webview tries to load content it cant handle. Intercept ref clicks using WebViewClient and send intent to open this ref in external application. Check this thread.

Android WebView__Use HTML5 video tag conflict with transparent background?

I am trying to make a Browser on Android and it extends WebView class.
There are two functions of my Browser:
1.Could play html5 video tag.
(I enable HardwareAccelerate and setWebChromeClient and it works fine on Android 4.0.)
2.The Browser must have a transparent Background.
(On Android 4.0, just setBackground(0) is not enough. I must also use setLayerType(LAYER_TYPE_SOFTWARE, null).)
But when I use setLayerType(LAYER_TYPE_SOFTWARE, null), the video tag can not paly. And that means setLayerType(LAYER_TYPE_SOFTWARE, null) disable HardwareAccerlarate so the video tag can not work.
So Can I consider that On Android 4.0, the two function is conflicting?Is there any workaround?
//set BackGroundColor
setBackgroundColor(Color.argb(0, 0, 0, 0));
if(android.os.Build.VERSION.SDK_INT>=11){
setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
}
//set WebChromeClient
setWebChromeClient(new WebChromeClient());
I have to say that, seems no guys met this issue as me.
So I think the two functions mentioned in my question is really conflicting.

WebView throws Receiver not registered: android.widget.ZoomButtonsController

I see this exception sporadically raising up in my application (in the wild).
The WebView is used to display a jpg (using the zoom/scroll-capabilities of the Android version/the device instead reinventing the wheel and do all the reflection stuff).
I have no idea why this exception eventually could come up. Basically I can only think of an Android bug.
What I do (everything in GUI thread):
display a thumbnail as preview first
set getSettings().setBuiltInZoomControls(false)
when the regular picture is loaded, display that one instead
set getSettings().setBuiltInZoomControls(true)
Why setting ZoomControls on/off: The thumb should not be zoomable, as the WebView resets this on loadData as soon as the regular picture is available and displayed. Would be some bad user experience.
Example device this is happening:
HTC Desire#htc_wwe/htc_bravo/bravo/bravo:2.2/FRF91/226611:user/release-keys
I have exactly the same device/software and it never happend to me...
Any ideas?
Regards,
Oliver
I don't like to answer myself, but littleFluffyKitty did not (only in comment).
Solution is in How to safely turn WebView zooming on and off as needed
a) create your own WebView class
public class MyWebView extends WebView {
b) add in it's onDestroy() method:
getSettings().setBuiltInZoomControls(true);
That's it. Thanks to that, no more of those Exceptions show up.

Categories

Resources