iframe 视频不会在 Android 网络视图中进入全屏模式

Question

我目前正在开发基于网站的 Android 应用程序。 iOS 应用程序已经存在，为了统一，我必须尊重一些代码。

一切都差不多完成了，但我刚刚发现了一个有趣的问题：当对带有 iframe 视频（Youtube、Dailymotion）的页面使用 webview（我对显示的页面没有任何控制）时，它不会即使我按下播放器的按钮，也要全屏显示。

我已经尝试了这里找到的几乎所有内容，但它仅指我知道您需要显示哪些页面的应用程序。

这是应用程序的 webActivity 部分的代码：

public class WebActivity extends Activity {
    String targetURL = "";
    String title = "";
    WebView wv;

    @Override
    public void onResume() { super.onResume(); CookieSyncManager.getInstance().startSync(); }
    @Override
    public void onPause() { super.onPause();  CookieSyncManager.getInstance().stopSync(); }

    /** Called when the activity is first created. */
    @SuppressLint("SetJavaScriptEnabled")
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().requestFeature(Window.FEATURE_PROGRESS);
        //getWindow().requestFeature(Window.FEATURE_NO_TITLE);
        CookieSyncManager.createInstance(getApplicationContext());
        CookieSyncManager.getInstance().startSync();
        CookieManager.getInstance().setAcceptCookie(true);
        /**
         * TODO: WebView Cookie management.
         * Right now, a cookie is hardcoded here into the WebView instead of getting it from the API called by HttpClient when retrieving the JSON.
         * Need to make things cleaner.
         */
        CookieManager.getInstance().setCookie("http://www.blabla.fr/mobile/","gbapi=1; Domain=.www.blabla.fr"); 
        /**
         * Get parameters
         */
        Bundle b = getIntent().getExtras();
        if(b != null)
        {
            targetURL = b.getString("url");
            title = b.getString("title");
        }

        setTitle(title);
        setContentView(R.layout.activity_webview);

        wv = (WebView) findViewById(R.id.webview);

        WebSettings wvSettings = wv.getSettings();

        // WebView options
        wvSettings.setDefaultTextEncodingName("utf-8");
        wvSettings.setJavaScriptEnabled(true);
        wvSettings.setPluginState(PluginState.ON);
        wvSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        wvSettings.setBuiltInZoomControls(true);
        final Activity activity = this;
        wv.setWebChromeClient(new WebChromeClient() {
            public void onProgressChanged(WebView view, int progress) {
                activity.setProgress(progress * 100);
            }
        });

        wv.setWebViewClient(new WebViewClient() {
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                Toast.makeText(activity, "Oh snap! " + description, Toast.LENGTH_SHORT).show();
            }
        });

        wv.loadUrl(targetURL);
    }
}

感谢您的帮助。

Answer 1

您将需要创建一个自定义 WebChromeClient 来处理 onShowCustomView（API 级别 14 中引入了此回调的新版本）以及 onHideCustomView 的两个版本。基本上会发生的是，当您尝试全屏播放视频时，您将看到一个与 VideoView 不同的视图。您需要将其附加到全屏 FrameLayout 并将其粘贴在布局层次结构的根部以覆盖整个屏幕。完成后，您需要再次将其删除。

这是我用来播放视频的版本

private class DerpChromeClient extends WebChromeClient implements MediaPlayer.OnCompletionListener, MediaPlayer.OnErrorListener {
    //@Override
    public void onShowCustomView(View view, int requestedOrientation, CustomViewCallback callback) {
        log.warn("onShowCustomView");
        showCustomView(view, callback);
    }

    private View mVideoProgressView;

    @Override
    public void onHideCustomView() {
        super.onHideCustomView();

        activity.removeFullscreenView();
        webView.setVisibility(View.VISIBLE);

        try {
            mCustomViewCallback.onCustomViewHidden();
        } catch (NullPointerException npe) {
            // occasionally Android likes to freak out and throw an unhandled NPE if it can't play the video
            // therefore we are not going to do anything but eat this exception so it fails gracefully
        }

        mCustomView = null;
        mVideoView = null;
    }

    @Override
    public void onShowCustomView(View view, CustomViewCallback callback) {
        super.onShowCustomView(view, callback);
        log.warn("onShowCustomView");
        showCustomView(view, callback);
    }

    private void showCustomView(View view, CustomViewCallback callback) {
        if (mCustomView != null) {
            callback.onCustomViewHidden();
            return;
        }

        mCustomView = view;
        mCustomViewCallback = callback;
        webView.setVisibility(View.GONE);

        if (view instanceof FrameLayout) {
            if (((FrameLayout)view).getFocusedChild() instanceof VideoView) {
                mVideoView = (VideoView)((FrameLayout)view).getFocusedChild();
            }
        }

        view.setLayoutParams(new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT));
        view.setBackgroundColor(Color.BLACK);
        activity.displayFullscreenView(view);
    }

    @Override
    public boolean onConsoleMessage(ConsoleMessage cm) {
        log.warn("Console Message: " + cm.message() + " on line " + cm.lineNumber() + " of " + cm.sourceId());
        return super.onConsoleMessage(cm);
    }

    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        super.onProgressChanged(view, newProgress);

        if (newProgress < 100) {
            if (loadingProgress.getVisibility() == ProgressBar.GONE) {
                loadingProgress.setVisibility(ProgressBar.VISIBLE);
            }
            loadingProgress.setProgress(newProgress);
        } else if (newProgress >= 100) {
            loadingProgress.setVisibility(ProgressBar.GONE);
        }
    }

    @Override
    public View getVideoLoadingProgressView() {
        if (mVideoProgressView == null) {
            LayoutInflater inflater = LayoutInflater.from(KnowledgeBaseFragment.this.getActivity().getApplicationContext());
            mVideoProgressView = inflater.inflate(R.layout.video_loading_progress, null);
        }

        return mVideoProgressView; 
    }

    @Override
    public boolean onError(MediaPlayer mp, int what, int extra) {
        // TODO Auto-generated method stub
        return false;
    }

    @Override
    public void onCompletion(MediaPlayer mp) {
        this.onHideCustomView();
    }
}

请注意，我是在片段中执行此操作的，因此要使其真正全屏显示，我必须将其与 Activity 紧密耦合，以便它可以将 FrameLayout 附加到整个视图层次结构的根部，而不仅仅是片段的根部。

以下是这些功能：

@Override
public void displayFullscreenView(View customView) {
    parentLayout.addView(customView);
    this.customView = customView;
}

@Override
public void removeFullscreenView() {
    if (customView != null) {
        customView.setVisibility(View.GONE);
        parentLayout.removeView(customView);
    }

    customView = null;
}

这是另一个和你一样的问题：WebView and HTML5 <video>