Hi,
Then, you need (of-course) to use the back button to close the video and to go back. And this is how I managed to do this.
You'll need is to add your member variables
I've never imagined that playing a HTML5 Youtube video inside a WebView would be such a tedious task. I even didn't think of it as a separate task.
The problem is that the video doesn't play. YES, it's as simple as that.
Any way, I found a work around solution that causes the video to run inside the media player instead of the WebView and of-course instead of launching the browser.
First, you'll need to add the next piece of code to your activity.
private class MyChromeClient extends WebChromeClient implements OnCompletionListener, OnErrorListener{
FrameLayout.LayoutParams COVER_SCREEN_GRAVITY_CENTER = new FrameLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER);
@Override
public void onShowCustomView(View view, CustomViewCallback callback) {
if (view instanceof FrameLayout) {
// mainWebView is the view that the video should've played inside.
wv = (WebView)findViewById(R.id.mainWebView);
mCustomViewContainer = (FrameLayout) view;
mCustomViewCallback = callback;
// mainLayout is the root layout that (ex. the layout that contains the webview)
mContentView = (RelativeLayout)findViewById(R.id.mainLayout);
if (mCustomViewContainer.getFocusedChild() instanceof VideoView) {
mVideoView = (VideoView) mCustomViewContainer.getFocusedChild();
// frame.removeView(video);
mContentView.setVisibility(View.GONE);
mCustomViewContainer.setVisibility(View.VISIBLE);
setContentView(mCustomViewContainer);
mVideoView.setOnCompletionListener(this);
mVideoView.setOnErrorListener(this);
mVideoView.start();
}
}
}
public void onHideCustomView() {
if (mVideoView == null){
return;
}else{
// Hide the custom view.
mVideoView.setVisibility(View.GONE);
// Remove the custom view from its container.
mCustomViewContainer.removeView(mVideoView);
mVideoView = null;
mCustomViewContainer.setVisibility(View.GONE);
mCustomViewCallback.onCustomViewHidden();
// Show the content view.
mContentView.setVisibility(View.VISIBLE);
}
}
public void onCompletion(MediaPlayer mp) {
mp.stop();
mCustomViewContainer.setVisibility(View.GONE);
onHideCustomView();
setContentView(mContentView);
}
public boolean onError(MediaPlayer arg0, int arg1, int arg2) {
setContentView(mContentView);
return true;
}
}
Then, you need (of-course) to use the back button to close the video and to go back. And this is how I managed to do this.
@Override
public void onBackPressed() {
if(mCustomViewContainer != null){
mVideoView.stopPlayback();
mCustomViewContainer.setVisibility(View.GONE);
if (mVideoView == null){
return;
}else{
// Hide the custom view.
mVideoView.setVisibility(View.GONE);
// Remove the custom view from its container.
mCustomViewContainer.removeView(mVideoView);
mVideoView = null;
mCustomViewContainer.setVisibility(View.GONE);
mCustomViewCallback.onCustomViewHidden();
// Show the content view.
mContentView.setVisibility(View.VISIBLE);
setContentView(mContentView);
mCustomViewContainer = null;
}
}else if(mainWebView.canGoBack()){
mainWebView.goBack();
}else{
super.onBackPressed();
}
}
You'll need is to add your member variables
private VideoView mVideoView;
private RelativeLayout mContentView;
private FrameLayout mCustomViewContainer;
private WebChromeClient.CustomViewCallback mCustomViewCallback;
One last thing, and actually it's the most important step, is to add the next line.
webView.setWebChromeClient(new MyChromeClient());
That's it, don't hesitate to comment, to share your knowledge and to correct me.
Android: Play HTML5 Youtube videos inside a WebView !!!