Play youtube/vimeo video embedded in HTML in Android WebView

Question

Hey So I'm trying to play youtube/vimeo videos embedded in HTML inside of a webview.

The typlical HTML will look like this:

<p>Here's some text from a server</p>
<p>This text goes inside of a webview</p>
<p>Sometimes there are iframe's with vimeo videos embedded in the HTML text like this:</p>

<iframe src="//player.vimeo.com/video/12345?title=0&amp;byline=0&amp;portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<p>Sometimes there are iframe's with youtube videos embedded in the HTML text like this:</p>

<p><iframe width="640" height="360" src="//www.youtube.com/embed/-NwibJy9-Cg?feature=player_detailpage" frameborder="0" allowfullscreen></iframe></p>

But no video plays, and no thumbnail for the video is shown either.

I've looked at many different StackOverflow posts on this subject but have not found any luck with them.

Here's my code to set up the webview:

public class ReaderFragment extends Fragment {

private TextView mTitleTextView, mDateTextView;
private WebView mContentWebView;
private StoryItem mStory;

@Override
public View onCreateView(LayoutInflater inflater,
                         final ViewGroup container, Bundle savedInstanceState) {

    View v = inflater.inflate(R.layout.fragment_reader, container, false);

    mTitleTextView = (TextView) v
            .findViewById(R.id.fragment_reader_story_title);
    mTitleTextView.setText(mStory.getTitle());

    mDateTextView = (TextView) v
            .findViewById(R.id.fragment_reader_story_date);
    mDateTextView.setText(mStory.getAuthor());

    mContentWebView = (WebView) v
            .findViewById(R.id.fragment_reader_story_content);

    mContentWebView.setWebChromeClient(new WebChromeClient());
    mContentWebView.getSettings().setPluginState(WebSettings.PluginState.ON);
    mContentWebView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND);
    mContentWebView.setWebViewClient(new WebViewClient());
    mContentWebView.setBackgroundColor(0x00000000);
    mContentWebView.getSettings().setBuiltInZoomControls(true);
    mContentWebView.getSettings().setJavaScriptEnabled(true);
    mContentWebView.getSettings().setLoadWithOverviewMode(true);
    mContentWebView.getSettings().setUseWideViewPort(true);

    //I load the webview with the entire HTML content from the server, including text, and
    //sometime <iframe> videos, I'd like to successfully embed these videos!
    mContentWebView.loadDataWithBaseURL(null, mStory.getUnparsedContent(),
            "text/html; charset=utf-8", "UTF-8", null);

    return v;
}

How can I display these inline <iframe> videos within my WebView?

Answer 1

因此，经过几天的修改，我终于找到了解决我的问题的方法！

\n\n

如果您想在您的电脑<iframe ../>中播放视频，您需要使用基本 URL 加载数据！此基本URL 应该是视频嵌入位置的URL，或者任何有助于指示可以找到视频的位置的URL。WebView

\n\n

不要这样做：

\n\n

// You need to give a baseUrl (e.g. the corresponding url of the HTML String)\nwebview.loadDataWithBaseURL(null, htmlWithVideosString,\n            "text/html; charset=utf-8", "UTF-8", null);\n

\n\n

改为这样做：

\n\n

    /*\n     VERY important to supply a baseURL for playing the videos!\n     Without a baseUrl the WebView has no idea where to look for the video.\n     The baseUrl will typically just be the URL that corresponds to the \n     HTML String that you are using.\n    */\n    mContentWebView.loadDataWithBaseURL(baseUrlOfHtmlContent, htmlWithVideosString,\n            "text/html; charset=utf-8", "UTF-8", null);\n

\n\n

祝你好运！

\n\n

还记得设置你的WebView...像这样...

\n\n

    mContentWebView.setWebChromeClient(new WebChromeClient());\n    mContentWebView.getSettings().setPluginState(WebSettings.PluginState.ON);\n    mContentWebView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND);\n    mContentWebView.setWebViewClient(new WebViewClient());\n    mContentWebView.getSettings().setJavaScriptEnabled(true);\n

\n\n

提示：可能需要打开“硬件加速\xe2\x80\x9d”才能Manifest正常工作。

\n\n

硬件加速开启示例：

\n\n

<application\n    android:name="com.example.app"\n    android:icon="@drawable/ic_launcher"\n    android:label="@string/app_name"\n    android:theme="@style/AppTheme"\n    android:hardwareAccelerated="true">\n<!-- hardwareAccelerated requires SDK 14 -->\n...\n</application>\n

\n