YouTube 视频未在 WebView 中播放答案

【问题标题】：YouTube Video not playing in WebViewYouTube 视频未在 WebView 中播放
【发布时间】：2013-07-16 09:46:06
【问题描述】：

YouTube 视频未在 WebView 中播放。

这是我的第一个应用程序，我想做一个 webview。当我打开 YouTube 时，视频未播放，正在加载但未播放。一直在加载。非常感谢您的帮助。

Java：

public class MainActivity extends Activity {

    private WebView mWebView;  

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.loadUrl("http://www.google.com");
        mWebView.setWebViewClient(new HelloWebViewClient());

    }

private class HelloWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView webview, String url)
        {
        webview.loadUrl(url);
        return true;
    }}

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event)
    {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack())
        {
            mWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);

    }   }

XML：

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

【问题讨论】：

stackoverflow.com/questions/15768837/…

标签： android video webview youtube

【解决方案1】：

似乎是 play youtube video in WebView 和 YouTube Video not playing in WebView - Android 的重复项

为了使其通过 WebView 工作，我使用了以下两个步骤（版本 4.2.2/Nexus 4）：

在shouldOverrideUrlLoading我加了webview.setWebChromeClient(new WebChromeClient());
在AndroidManifest.xml for activity 标签中我添加了android:hardwareAccelerated="true"

AndroidManifest.xml 还应包含 Internet 权限。

虽然通过 WebView 播放视频的具体步骤可能因设备和 Android 版本而异，但 WebView 也有其他替代方案，例如 VideoView 或使用 Youtube Android Player API。

EDIT1

至于暂停和全屏，这其实是我一开始提到的第二个链接。为了方便起见，我发布了适用于我的 Nexus 的代码。

在activity_main.xml中

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
 tools:context=".MainActivity" >

<FrameLayout
          android:id="@+id/fullscreen_custom_content"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="#FF000000"/>

<LinearLayout 
          android:id="@+id/linearlayout"
          android:layout_width="fill_parent" 
          android:layout_height="fill_parent"> 

     <WebView
           android:id="@+id/webView"
           android:layout_width="fill_parent"
           android:layout_height="fill_parent" />

</LinearLayout>
</RelativeLayout>

在 MainActivity 类中：

public class MainActivity extends Activity {

private WebView mWebView;  
private LinearLayout mContentView;
private FrameLayout mCustomViewContainer;
private WebChromeClient.CustomViewCallback mCustomViewCallback;
FrameLayout.LayoutParams COVER_SCREEN_GRAVITY_CENTER = new FrameLayout.LayoutParams(
        ViewGroup.LayoutParams.WRAP_CONTENT,
        ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER);

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mContentView = (LinearLayout) findViewById(R.id.linearlayout);
    mWebView = (WebView) findViewById(R.id.webView);
    mCustomViewContainer = (FrameLayout) findViewById(R.id.fullscreen_custom_content);

    WebSettings webSettings = mWebView.getSettings();
    webSettings.setPluginState(WebSettings.PluginState.ON);
    webSettings.setJavaScriptEnabled(true);
    webSettings.setUseWideViewPort(true);
    webSettings.setLoadWithOverviewMode(true);

    mWebView.loadUrl("http://www.google.com");
    mWebView.setWebViewClient(new HelloWebViewClient());

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}



private class HelloWebViewClient extends WebViewClient  {
    @Override
    public boolean shouldOverrideUrlLoading(WebView webview, String url)
    {
        webview.setWebChromeClient(new WebChromeClient() {

            private View mCustomView;

             @Override
            public void onShowCustomView(View view, WebChromeClient.CustomViewCallback callback)
            {
                // if a view already exists then immediately terminate the new one
                if (mCustomView != null)
                {
                    callback.onCustomViewHidden();
                    return;
                }

                // Add the custom view to its container.
                mCustomViewContainer.addView(view, COVER_SCREEN_GRAVITY_CENTER);
                mCustomView = view;
                mCustomViewCallback = callback;

                // hide main browser view
                mContentView.setVisibility(View.GONE);

                // Finally show the custom view container.
                mCustomViewContainer.setVisibility(View.VISIBLE);
                mCustomViewContainer.bringToFront();
            }

        }); 

      webview.loadUrl(url);

      return true;
    }
}

@Override
public boolean onKeyDown(int keyCode, KeyEvent event)
{
    if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack())
    {
        mWebView.goBack();
        return true;
    }
    return super.onKeyDown(keyCode, event);

} 
}

EDIT2 - 添加后退按钮支持

public class MainActivity extends Activity {

private WebView mWebView;  
private LinearLayout mContentView;
private FrameLayout mCustomViewContainer;
private View mCustomView;
private WebChromeClient.CustomViewCallback mCustomViewCallback;
FrameLayout.LayoutParams COVER_SCREEN_GRAVITY_CENTER = new FrameLayout.LayoutParams(
        ViewGroup.LayoutParams.WRAP_CONTENT,
        ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER);

private WebChromeClient mWebChromeClient;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mContentView = (LinearLayout) findViewById(R.id.linearlayout);
    mWebView = (WebView) findViewById(R.id.webView);
    mCustomViewContainer = (FrameLayout) findViewById(R.id.fullscreen_custom_content);

    mWebChromeClient = new WebChromeClient() {


         @Override
        public void onShowCustomView(View view, WebChromeClient.CustomViewCallback callback)
        {
            // if a view already exists then immediately terminate the new one
            if (mCustomView != null)
            {
                callback.onCustomViewHidden();
                return;
            }

            // Add the custom view to its container.
            mCustomViewContainer.addView(view, COVER_SCREEN_GRAVITY_CENTER);
            mCustomView = view;
            mCustomViewCallback = callback;

            // hide main browser view
            mContentView.setVisibility(View.GONE);

            // Finally show the custom view container.
            mCustomViewContainer.setVisibility(View.VISIBLE);
            mCustomViewContainer.bringToFront();
        }

         @Override
         public void onHideCustomView()
         {
             if (mCustomView == null)
                 return;

             // Hide the custom view.
             mCustomView.setVisibility(View.GONE);
             // Remove the custom view from its container.
             mCustomViewContainer.removeView(mCustomView);
             mCustomView = null;
             mCustomViewContainer.setVisibility(View.GONE);
             mCustomViewCallback.onCustomViewHidden();

             // Show the content view.
             mContentView.setVisibility(View.VISIBLE);
         } 
    };

    WebSettings webSettings = mWebView.getSettings();
    webSettings.setPluginState(WebSettings.PluginState.ON);
    webSettings.setJavaScriptEnabled(true);
    webSettings.setUseWideViewPort(true);
    webSettings.setLoadWithOverviewMode(true);

    mWebView.loadUrl("http://www.google.com");
    mWebView.setWebViewClient(new HelloWebViewClient());

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}



private class HelloWebViewClient extends WebViewClient  {

    @Override
    public boolean shouldOverrideUrlLoading(WebView webview, String url)
    {
        webview.setWebChromeClient(mWebChromeClient);   
        webview.loadUrl(url);

      return true;
    }
}

@Override
protected void onStop() {

    super.onStop();
    if (mCustomView != null)
    {
        if (mCustomViewCallback != null)
            mCustomViewCallback.onCustomViewHidden();
        mCustomView = null;
    }

}

@Override
public void onBackPressed() {

    super.onBackPressed();
     if (mCustomView != null)
     {
         mWebChromeClient.onHideCustomView();
     } else
     {
         finish();
     }
}

@Override
public boolean onKeyDown(int keyCode, KeyEvent event)
{
    if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack())
    {
        mWebView.goBack();
        return true;
    }
    return super.onKeyDown(keyCode, event);

}   
}

【讨论】：

@omer341 您尝试在哪个 Android 版本上运行或模拟它？你试过什么？添加webview.setWebChromeClient(new WebChromeClient() {}); 和硬件加速标签对您的情况没有用处吗？
我正在尝试在我的平板电脑上运行它在 Android 版本 4.1.2 上。
@omer341 我为我的 Nexus 4 尝试了上面的几个步骤（添加到答案中），它确实有效。您是否尝试过这些步骤？
但是当我按下暂停视频后，它变黑了，视频不能全屏。
Alex，如果你能把这个示例做成 BitBucket 上的一个公共项目，那将是非常有帮助的......很难遵循面包屑，这在 Android 上显然有点棘手。

【解决方案2】：

添加webchrome客户端解决问题，

web = (WebView) vi.findViewById(R.id.offer_webView1);

        web.loadUrl(getResources().getString(R.string.videolink));

        web.getSettings().setJavaScriptEnabled(true);
        // web.getSettings().setDomStorageEnabled(true);

        web.getSettings().setAllowContentAccess(true);
        WebSettings webSettings = web.getSettings();
        webSettings.setPluginState(WebSettings.PluginState.ON);
        webSettings.setUseWideViewPort(true);
        webSettings.setLoadWithOverviewMode(true);
        web.canGoBack();
        web.setWebChromeClient(new WebChromeClient() {});

【讨论】：