如何在 Android WebView 中播放 HTML5 视频和 YouTube 视频？答案

【问题标题】：How to Play HTML5 video and YouTube Video within Android WebView?如何在 Android WebView 中播放 HTML5 视频和 YouTube 视频？
【发布时间】：2011-10-22 04:18:29
【问题描述】：

我正在尝试在 android webview 中播放 html5 视频和 youtube 视频，但无法在 android webview 屏幕上显示视频。并播放此视频。

我用过下面的代码sn-p...

layout xml 文件命名：test.xml 包含以下代码片段：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:id="@+id/rltvLayoutTest"
    android:layout_height="fill_parent">
    <WebView android:id="@+id/webViewTest" android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
</LinearLayout>

和活动类名称：Test.java 包含下面给出的代码：

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.test);

        WebView mWebView = (WebView)findViewById(R.id.webViewTest);


        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.getSettings().setAllowFileAccess(true);
        mWebView.getSettings().setPluginsEnabled(true);
        mWebView.setWebChromeClient(new chromeClient());
        mWebView.setWebViewClient(new WebViewClient(){

        });
        mWebView.loadUrl("http://broken-links.com/tests/video/");
    }

    public class chromeClient extends WebChromeClient implements OnCompletionListener, OnErrorListener{
        private WebView wv;
        private VideoView mVideoView;
        private LinearLayout mContentView;
        private FrameLayout mCustomViewContainer;
        private WebChromeClient.CustomViewCallback mCustomViewCallback;
        FrameLayout.LayoutParams COVER_SCREEN_GRAVITY_CENTER = new FrameLayout.LayoutParams(
                ViewGroup.LayoutParams.FILL_PARENT,
                ViewGroup.LayoutParams.FILL_PARENT, Gravity.CENTER);

        @Override
        public void onShowCustomView(View view, CustomViewCallback callback) {
            if (view instanceof FrameLayout) {
                wv = (WebView)findViewById(R.id.webViewTest);
                mCustomViewContainer = (FrameLayout) view;
                mCustomViewCallback = callback;
                mContentView = (LinearLayout)findViewById(R.id.rltvLayoutTest);
                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;
            // 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;
        }
    }

【问题讨论】：

标签： android webview

【解决方案1】：

它对我有用。也可以帮到你play html videos

【讨论】：

无法自动播放 Youtube 视频

【解决方案2】：

我使用html5webview解决了这个问题。下载并放到你的项目中然后你就可以像这样编码了。

private HTML5WebView mWebView;
String url = "SOMEURL";
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mWebView = new HTML5WebView(this);
    if (savedInstanceState != null) {
            mWebView.restoreState(savedInstanceState);
    } else {
            mWebView.loadUrl(url);
    }
    setContentView(mWebView.getLayout());
}
@Override
public void onSaveInstanceState(Bundle outState) {
    super.onSaveInstanceState(outState);
    mWebView.saveState(outState);
}

要使视频可旋转，请将 android:configChanges="orientation" 代码放入您的 Activity 例如（Androidmanifest.xml）

<activity android:name=".ui.HTML5Activity" android:configChanges="orientation"/>

并覆盖 onConfigurationChanged 方法。

@Override
public void onConfigurationChanged(Configuration newConfig) {
     super.onConfigurationChanged(newConfig);
}

【讨论】：

本项目基于minSDK版本。如果版本超过 11 则不起作用。
它有效。您不必在项目中放置任何 apk。这是一个图书馆。尝试搜索如何在您的 android 项目中使用库。
我们项目中如何将apk作为库使用？

【解决方案3】：

如果您在平板电脑上运行它...您在清单文件中添加 hardwareaccelerated= true ，它肯定会工作..还将 sdk 版本更改为 11

【讨论】：

【解决方案4】：

您尚未将 mCustomViewContainer 添加到您的视图层次结构中

【讨论】：

我无法获得，我必须添加 mCustomViewContainer。