Question

我有WebView需要显示后端服务器提供的HTML内容。内容具有不同的嵌入式媒体类型，例如：Instagram，Twitter，动画GIF，Facebook帖子，YouTube，Vimeo视频。

问题：我希望内容包含在webview中，因此它不会水平滚动。如果我解决了这个问题，那么YouTube视频就不再有效了（显示空白占位符，点击它时没有任何反应）。这是代码:(凌乱，我知道）：

    mWebView = (WebView) findViewById(R.id.wv_content);
    mWebView.getSettings().setJavaScriptEnabled(true);        
    mWebView.setWebChromeClient(new WebChromeClient());
    mWebView.getSettings().setPluginState(WebSettings.PluginState.ON);
    mWebView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND);
    mWebView.setWebViewClient(new WebViewClient());             
    mWebView.getSettings().setRenderPriority(WebSettings.RenderPriority.HIGH);//hopefully load GIFs faster
    mWebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);//hopefully load GIFs faster

    /** The line with the issue:
     * Upside: prevents horizontal scrolling, the content wraps;
     * Downside: YouTube videos no longer work. Blank placeholder appears
     */    
    mWebView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);

我不知道该怎么做，解决内容包装的问题，以及嵌入式YouTube视频的问题。

这是xml，如果它有帮助：

             <WebView
                android:id="@+id/wv_content"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="@dimen/generic_margin"
                android:textAppearance="@android:style/TextAppearance.Holo.Medium"
                android:textColor="@color/black"
                android:textSize="@dimen/generic_text_size"
                tools:text="main title lorem ipsum dolore Typobli" />

任何建议都非常受欢迎。

Answer 1

尝试设置

mWebView.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
mWebView.getSettings().setLoadWithOverviewMode(true);
mWebView.getSettings().setUseWideViewPort(true);

Answer 2

根据以下savepopulation的建议修正：

1）。创建了一个HTML模板，其中包含以下style规则：

<style type="text/css">
    body, img, iframe, div {
    width: {{max_width}}px !important;
    }
</style>
<div>
        {{content_body}}
</div>

2）。从assets文件夹中读取模板并替换占位符：

template.replaceFirst("\\{\\{content_body\\}\\}", htmlContent).replaceFirst("\\{\\{max_width\\}\\}", String.valueOf(320));//put your computed value here

3）。将内容加载到webview中：

//veryVeryVery important for playing the videos and displaying embedded instagram photos
mWebView.loadDataWithBaseURL(mBaseUrl, template, "text/html", "UTF-8", null);

Android WebView嵌入媒体内容

2 个答案: