Android: Play HTML5 Youtube videos inside a WebView !!!

Hi,

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. 

Posted in Android