Embedded IFRAME video keeps playing in background

问题:

I've searched a lot for a fix on this problem but apparently i couldn't find one. Well, as the name suggests I have a simple Android app which has a Webview.

public class MainActivity extends Activity {
   protected FrameLayout webViewPlaceholder;
   protected WebView webView;
   final Context myApp = this;
   @Override
   public void onCreate(Bundle savedInstanceState)
   {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

      // Initialize the UI
      initUI();
   }

   protected void initUI()
   {
    // Retrieve UI elements
    webViewPlaceholder = ((FrameLayout)findViewById(R.id.webViewPlaceholder));

    // Initialize the WebView if necessary
    if (webView == null)
    {
        // Create the webview
        webView = new WebView(this);
        webView.setLayoutParams(new ViewGroup.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
        webView.getSettings().setSupportZoom(true);
        webView.getSettings().setBuiltInZoomControls(true);
        webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
        webView.setScrollbarFadingEnabled(true);
        webView.getSettings().setLoadsImagesAutomatically(true);

        // Load the URLs inside the WebView, not in the external web browser
        webView.setWebViewClient(new WebViewClient());
        //webView.setWebChromeClient(new CustomChromeClient(this));
        webView.setWebChromeClient(new WebChromeClient() {  
            @Override  
            public boolean onJsAlert(WebView view, String url, String message, final android.webkit.JsResult result)   
            {  
                new AlertDialog.Builder(myApp)  
                    .setTitle("javaScript dialog")  
                    .setMessage(message)  
                    .setPositiveButton(android.R.string.ok,  
                            new AlertDialog.OnClickListener()   
                            {  
                                public void onClick(DialogInterface dialog, int which)   
                                {  
                                    result.confirm();  
                                }  
                            })  
                    .setCancelable(false)  
                    .create()  
                    .show();  

                return true;  
            };
            public void onShowCustomView(View view, CustomViewCallback callback){
                super.onShowCustomView(view, callback);
                Log.i("ChromeCLient", "onshowCustomView");
                new AlertDialog.Builder(myApp)  
                .setTitle("javaScript dialog")  
                .setMessage("ajbdlsakndsland")  
                .setCancelable(true)  
                .create()  
                .show();  
            }
            @Override
            public void onHideCustomView() {
                super.onHideCustomView();
                Log.i("ChromeCLient", "onhideCustomView");
            }
        });  

        webView.getSettings().setJavaScriptEnabled(true);
        if (Build.VERSION.SDK_INT < 8) {
          webView.getSettings().setPluginsEnabled(true);
        } else {
          webView.getSettings().setPluginState(WebSettings.PluginState.ON);
        }
        // Load a page
        webView.loadUrl("http://jsbin.com/ijixe4/3");
    }

    // Attach the WebView to its placeholder
    webViewPlaceholder.addView(webView);
}

@Override
public void onConfigurationChanged(Configuration newConfig)
{
    if (webView != null)
    {
        // Remove the WebView from the old placeholder
        webViewPlaceholder.removeView(webView);
    }

    super.onConfigurationChanged(newConfig);

    // Load the layout resource for the new configuration
    setContentView(R.layout.activity_main);

    // Reinitialize the UI
    initUI();
}

@Override
protected void onSaveInstanceState(Bundle outState)
{
    super.onSaveInstanceState(outState);

    // Save the state of the WebView
    webView.saveState(outState);
}

@Override
protected void onRestoreInstanceState(Bundle savedInstanceState)
{
    super.onRestoreInstanceState(savedInstanceState);

    // Restore the state of the WebView
    webView.restoreState(savedInstanceState);
}
}

My problem is as follows. The site that is loaded in the webview is a site which contains a simple iframe embedded youtube video. When i hit the FullScreen button on the youtube video, it changes my app orientation even though i set in my manifest: screenOrientation ="portrait". When exiting the FullScreen, while playing the video keeps playing (in background), even though the webview has been recreated due to the orientation change. I've tried destroying the webview in the onDestroy() method of the activity when the orientation turns from landscape to portrait. but it didn't help. I've tried setting a CustomWebChromeClient to the webview and implementing the onShowCustomView() method, but the onShowCustomView() apparently isn't called unless i use HTML5 videos. I've even tried to retain the state of the webview through the orientation change.

Do you guys have any other way of resolving this problem/bug? I wouldn't really want to use the HTML5 video tag. Thanks in advance.

回答1:

Just override onPause and onResume methods and call the same methods on the webView as follows.

@Override
protected void onResume() {
    super.onResume();
    this.webView.onResume();
}

@Override
protected void onPause() {
    super.onPause();
    this.webView.onPause();
}

回答2:

I found this while facing the same issue:

webView.loadData("", "text/html", "utf-8"); // in onDestroy/onFinish

It stops the video playing. Might be helpful. I cant say right now if it helps you but you have to try it in orientation changes or whatever.<> BTW Youtube has its own API so maybe its better to use it instead of WebView