I am using HTML video tag to play video in android Webview. However, when I try to press the fullscreen button, the onShowCustomView() from webview chrome client is called only the first time. Every subsequent time I press the fullscreen button, the function onShowCustomView() is not called.
What I want is, every time I press the fullscreen button, onShowCustomView() should be called.
Webview
webView.getSettings().setMediaPlaybackRequiresUserGesture(false);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setPluginState(WebSettings.PluginState.ON);
webView.getSettings().setAppCacheEnabled(true);
webView.setWebChromeClient(mClient);
webView.setWebViewClient(new WebViewClient());
HTML Video Tag
<div>
<!--<img id="videoImage" src="img/UI_homepage_innovation.png" style="cursor:pointer" onclick="play()"/>
<iframe id="video" style="display:none;" src="http://www.youtube.com/embed/SNMjzPRQUA8?modestbranding=1&rel=0&showinfo=0&autohide=1&fs=0&autoplay=1" frameborder="0" #allowfullscreen></iframe>-->
<video poster="img/UI_homepage_innovation.png" controls>
<source src="video/sintel.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
Webview Chrome Client
public class MyChromeClient extends WebChromeClient {
#Override
public void onShowCustomView(View view, CustomViewCallback callback) {
Log.v("Testing", "onShowCustomView");
}
#Override
public void onHideCustomView() {
Log.v("Testing", "onHideCustomView");
}
}
In order for this to work correctly, I learned that I needed to get the video view Holder and put it in another view. However, I wanted to use my own custom fullscreen view.
In order to do that I made my own custom HTML video controls for using CSS and Javascript and used a 'fullscreen' button to call my custom fullscreen view everytime. Worked like a charm!
Related
I have a strange behaviour when trying to play back a video in an Android WebView.
Whilst the video actually does play, and the sound is audible, there's only a white/ blank screen where the video should be.
It works perfectly fine using the native browser.
Not even in a new very basic, new Android project (using a new, empty emulator), a video is displayed. Also tried with the 3gp format and using some recent SDK (API 27).
Also there is no difference among emulator (various devices) and the physical device. I also had no success opening different websites containing videos (websites are displayed, together with the video - sound available, but no image).
The video control is visible and can be clicked (unless set to autoplay, where it is immediately played back).
Error messages from the log:
E/chromium: [ERROR:gl_surface_egl.cc(264)] eglChooseConfig failed with error EGL_SUCCESS
E/EGL_emulation: eglQueryContext 32c0 EGL_BAD_ATTRIBUTE
E/EGL_emulation: tid 23192: eglQueryContext(1772): error 0x3004 (EGL_BAD_ATTRIBUTE)
E/ACodec: [OMX.google.h264.decoder] setPortMode on output to DynamicANWBuffer failed w/ err -1010
HTML page displayed in the WebView:
<html>
<head>
</head>
<body>
<video controls autoplay>
<source src="https://www...*.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Basic application content:
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView webView = findViewById(R.id.webView);
webView.loadUrl("https://www...");
}
}
My attempts include setting custom webview, webchrome client as well as enabling/ disabling custom settings.
webView.setWebChromeClient(new MyWebChromeClient());
webView.setWebViewClient(new MyWebViewClient(activity));
webView.clearCache(true);
webView.clearHistory();
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true); // Seems to be required to support HTTPS
webSettings.setAllowFileAccess(true);
//Enabling zoom-in controls
webSettings.setSupportZoom(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setDisplayZoomControls(true);
webSettings.setMediaPlaybackRequiresUserGesture(false);
webView.getSettings().setDomStorageEnabled(true);
webView.getSettings().setAppCacheEnabled(true);
webView.getSettings().setLoadsImagesAutomatically(true);
webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
In the manifest:
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
With attempts
android:hardwareAccelerated="true"/ "false"
Any help where to dig in further would be much appreciated.
Apparently, the video size could not be calculated by the web engine anymore. It was then rendered with width and height of zero.
This can be fixed by assigning a width to the <video> tag:
<video controls autoplay style="width:100px;">
<source src="https://www...*.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Or
<div style="width:100%; height:100%;">
<video controls autoplay>
<source src="https://www...*.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
I have built a app in android in which I am trying to show 3 videos in single screen at a time.
For displaying video I am using webView of chrome(version 62).
Inside HTML I have below code
<video id="vid1" class="vids" width="100%" height="100%" autoplay muted loop>
<source src="pathTotVideo.mp4" type="video/mp4"/>
</video>
I am using android 4.2.2
Now problem is that when page loads, video tag is there but I don't see any video playing. Even if I provide 'contorls' attribute inside video tag still the play button is greyed out.
Even there is no error in console.
Video tag's attributes should be specified for strict standard implementation:
<video id="vid1" class="vids" width="100%" height="100%" muted loop autoplay="autoplay" controls="controls">
<source src="pathTotVideo.mp4" type="video/mp4"/>
</video>
Replace your current video tag with above one. Please do let me know whether its working or not.
Please add below code before proceeding to webview
webView.setWebViewClient(new MyWebViewClient());
webView.setWebChromeClient(new WebChromeClient());
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("your web view path");
Add android:hardwareAccelerated="true" as a child in your activity manifest file. It plays html5 video inside webviews without any workaround.
For example:
<activity
android:name="com.example.MainActivity"
android:hardwareAccelerated="true"
android:configChanges="keyboardHidden|orientation|screenSize" >
...
</activity>
In webView, I am loading a html file. The file contains text, images and a youtube link. Text and the images are displayed just by loadUrl() method, but video is not being played. How should I get the link and play video.
Format in which link is present in html file is :
<p style="text-align: center; margin: 0px;">
<iframe class="youtube-player" type="text/html" width="300" height="169" src="http://www.youtube.com/embed/4H0fTwtPLfo" allowfullscreen frameborder="0">
</iframe>
</p>
Please guide me.
EDIT
loading html file:
webView.loadUrl("file:///android_asset/"+htmlFile);
webView.setWebViewClient(new VideoWebViewClient());
VideoWebViewClient class:
private class VideoWebViewClient extends WebViewClient{
#Override
public boolean shouldOverrideUrlLoading(WebView webView, String url) {
webView.loadUrl(url);
return true;
}
}
EDIT 2
I am able to play video by adding following lines of code:
WebSettings webSetting = webView.getSettings();
webSetting.setJavaScriptEnabled(true);
webSetting.setPluginState(WebSettings.PluginState.ON_DEMAND);
webSetting.setAllowContentAccess(true);
webView.loadUrl("file:///android_asset/"+htmlFile);
webView.setWebViewClient(new VideoWebViewClient());
I want to play video in full screen, but the full screen button freeze the video. Can anyone help?
I'd like to play a video using WebView capabilities.
Currently I'm able to play the following html in all browsers I've tested (Chrome, Chrome for Android, Navegator for Android). Unfortunately, I can not get it playing inside my own application using a WebView: the player's controls are shown, but clicking at play button make the seek bar goes to the end and a progress circle takes place and never ends.
Here are the relevant code:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_video);
WebView webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setPluginState(PluginState.ON);
webView.setWebChromeClient(new WebChromeClient());
webView.loadUrl("file:///android_asset/www/index.html");
}
index.html:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>video1</title>
</head>
<body>
<video id="video" controls height="240" width="360">
<source src="index.files/html5video/video1.m4v">
</video>
<script type="text/javascript">
var vid=document.getElementById('video');
vid.addEventListene('click', function () {
vid.play();
}, false);
</script>
</body>
You can rely that all files are placed in the right place.
I know this is an old post, but I was having the same issue on my Galaxy S3. I solved it with this :
webView.SetWebChromeClient (new WebChromeClient ());
It worked just fine on Nexus 7 without this line, but on Galaxy S3 for some reason it just spun the loading circle forever.
NOTE: I also have these set:
webView.Settings.PluginsEnabled = true;
webView.Settings.JavaScriptEnabled = true;
webView.Settings.SetPluginState (WebSettings.PluginState.On);
webView.SetWebViewClient (new WebViewClient ());
I had the same problem, none of solutions found at others helped me. I have tried many different ways to solve this, but I didn't managed. So, my solution was to display a thumb instead of video, this thumb was an image linking to video source and when this thumb pressed, the video starts in Android native video player. You could try this if didn't resolved it yet.
Later, I found this: https://code.google.com/p/googletv-android-samples/source/browse/#git%2FWebAppNativePlayback It works by playing video in webview as you want, but the problem is you can not control video controls from D-pad keyboard.
Hope you got a solution!
So I've searched around on SO a fair bit today and have made significant progress, but now I'm having an issue that I haven't seen pop up anywhere. I've embedded a YouTube video into an HTML file using an iframe as such:
<body>
<div align="center">
<iframe class="youtube-player" type="text/html" width="480" height="320"
src="http://www.youtube.com/embed/9DNAyD4ll6E?html5=1" frameborder="0">
</div>
</body>
and I'm displaying it in a WebView that I'm modifying in my activity like so:
WebView welcomeWebView = (WebView) findViewById(R.id.welcomeVideo);
welcomeWebView.setHorizontalScrollBarEnabled(false);
welcomeWebView.setVerticalScrollBarEnabled(false);
welcomeWebView.getSettings().setJavaScriptEnabled(true);
welcomeWebView.loadUrl("file:///android_asset/welcome.html");
The issue I'm having is that the still image display and controls show up, but when I click on play I'm presented with a gray screen that has a film strip and play icon in it. Here's the screen shots for the before/after for hitting play
http://www.ptrprograms.com/youtubeapp.png
http://www.ptrprograms.com/youtubeapp2.png
If anyone has seen this before or can point me in the right direction for displaying a video, I'd really appreciate it. Thank you!
EDIT: I also know that I can just use an intent to open it in a YouTube app, but my client (a non-profit that I'm donating this app to) is pretty specific about wanting it embedded into a page where we can have a textview with more information below it.
So I ditched the external asset for the webview and instead decided to load it in the activity itself, and it seems to work a lot better (it actually runs :))
WebView webView = (WebView) findViewById(R.id.welcomeVideo);
String play= "<html><body><div align=\"center\"> <iframe class=\"youtube-player\" type=\"text/html\" width=\"480\" height=\"320\" src=\"http://www.youtube.com/embed/9DNAyD4ll6E?rel=0\" frameborder=\"0\"></div></body></html>";
webView.setWebChromeClient(new WebChromeClient() {
});
webView.getSettings().setJavaScriptEnabled(true);
webView.loadData(play, "text/html", "utf-8");
webView.setBackgroundColor(0x00000000);