在 Android WebView 中播放嵌入在 HTML 中的 youtube/vimeo 视频

Question

嘿，所以我正在尝试在webview 中播放嵌入在 HTML 中的 youtube/vimeo 视频。

典型的 HTML 如下所示：

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

但是没有视频播放，也没有显示视频的缩略图。

我查看了许多关于此主题的不同 StackOverflow 帖子，但没有发现任何运气。

这是我设置 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;
}

如何在我的WebView 中显示这些内嵌<iframe> 视频？

Answer 1

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

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

不要这样做：

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

改为这样做：

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

祝你好运！

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

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

提示：可能需要在Manifest 中打开“硬件加速”才能使其工作。

示例硬件加速开启：

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