如何在Android WebView中播放HTML5视频和YouTube视频?

时间:2011-08-08 07:28:23

标签: android webview

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

我使用了以下代码段...

layout xml文件命名:test.xml包含下面的代码snipet:

<?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>

和Activity类名: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;
        }
    }

4 个答案:

答案 0 :(得分:1)

我使用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);
}

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

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