Android WebView加载富文本标签，设置文本、图片、视频格式化

最新推荐文章于 2025-04-25 11:57:13 发布

原创最新推荐文章于 2025-04-25 11:57:13 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#android #音视频

一般常规接口返回的富文本标签，不会包含WebView的页面设置的，需要自己设置webview加载的宽高，如果里面存在图片和视频，要设置图片的宽高适配。还有如果文本过长，webview加载的时候也不会自动换行，需要对这些情况做特殊处理。

    /**
     * 拼接html字符串片段
     *
     * @param bodyHTML
     * @return
     */
    public static String getHtmlData(String bodyHTML) {
        String head = "<head>" +
                "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\"> " +
                "<style>img{display: block; width:100%; height:auto;}" +
                "video{ width:100%; height:auto;}" +
                "html, body {margin: 0px;padding: 0px;}" +
                "p{color:#666666;font-size: 14px!important;word-break: break-word;}" +
                "span{color: #666;font-size: 14px!important;}" +
                "</style>" +
                "</head>";
        return "<html>" + head + "<body style:'height:auto; width:100%;'>" + bodyHTML + "</body></html>";
    }

getHtmlData设置好了webview加载的内容适配以后，再处理视频加载的默认显示图。目前处理方式是默认播放到0.1秒来当做封面图，比Android原生的UI加载的样式看着更加舒服。


    public static void loadUrl(Context context, final WebView webView, String htmlContent) {
        webView.getSettings().setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new WebViewImageClickInterface(context), "ImageClickInterface");

        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                String javascriptCode = "(function() { " +
                        "var images = document.getElementsByTagName('img');" +
                        "for(var i = 0; i < images.length; i++) {" +
                        "   images[i].onclick = function() {" +
                        "       ImageClickInterface.onImageClick(this.src);" +
                        "   }" +
                        "}" +
                        "var videos = document.getElementsByTagName('video');" +
                        "for (var i = 0; i < videos.length; i++) {" +
                        "    var video = videos[i];" +
                        "    (function(i) {" +
                        "        video.currentTime = 0.1;" +
                        "        video.addEventListener('seeked', function() {" +
                        "            var canvas = document.createElement('canvas');" +
                        "            canvas.width = video.videoWidth;" +
                        "            canvas.height = video.videoHeight;" +
                        "            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);" +
                        "            var dataURL = canvas.toDataURL('image/png');" +
                        "            video.poster = dataURL;" +
                        "            video.pause();" +
                        "        });" +
                        //"        video.play();" +
                        "    })(i);" +
                        "}" +
                        "})()";

                view.loadUrl("javascript:" + javascriptCode);
            }
        });

        webView.loadDataWithBaseURL(null, getHtmlData(htmlContent), "text/html", "UTF-8", null);
    }

class WebViewImageClickInterface {
    private Context mCxt;

    public WebViewImageClickInterface(Context context) {
        this.mCxt = context;
    }

    @JavascriptInterface
    public void onImageClick(String imageUrl) {
        // 在这里处理图片点击事件
        LogUtils.e("--------->  " + imageUrl);
        PhotoImageActivity.start(mCxt,imageUrl);
    }
}