解决Android中WebView视频无法播放的问题

来源：互联网发布：快速阅读记忆训练软件编辑：程序博客网时间：2024/05/16 18:21

原文：http://www.itxiechao.com/330.html

解决Android中WebView LayoutAlgorithm.SINGLE_COLUMN导致视频无法播放的问题

相信做Android开发的朋友都知道使用WebView 中的webview.loadUrl(url);或webview.loadDataWithBaseURL(“about:blank”, htmlContent, “text/html”, “utf-8″, null);来显示html内容，但如果html内容中包含图片，有可能会导致网页显示异常，会出现左右滚动条，或者图片太小或太大，反正不好看，这时候大家可能会使用：

1
2
// 设置加载进来的页面自适应手机屏幕
webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

这段代码在大部分手机上面都有效，但后来我发现在小米3上面还是会出现左右滚动条，图片太长导致的，后研究了好久发现是因为加载进来的html代码中的解决Android中WebView视频无法播放的问题的图片第1张标签中含有width和height属性，导致在小米3上面显示异常，也就是说之前写的LayoutAlgorithm.SINGLE_COLUMN没起作用，后来我又加入了这段代码：

1
2
3
4
5
6
// 替换标签中含有width和height属性为width="100%" height=""
try{
    htmlContent = htmlContent.replaceAll("width=\"([^\"]+)\"", "width=\"100%\"");
    htmlContent = htmlContent.replaceAll("height=\"([^\"]+)\"", "");   
}catch(Exception e) {
}

这样在小米3手机上面也可以让加载进来的页面自适应手机屏幕了。

但是最近又有新的需求，需要在html中嵌入视频，发现在我们的APP中无法播放视频，在ios中却可以，所以我马上判断是我Android的代码有问题了，然后马上去检查代码，经过一个上午的奋斗，终于发现问题出在之前那段代码上面：

1
2
// 设置加载进来的页面自适应手机屏幕
webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

原来这段代码会改变视频播放显示的尺寸，导致视频无法播放，去掉这段代码我又怕不能让界面适应手机屏幕，后来终于让我找到了一个完美解决LayoutAlgorithm.SINGLE_COLUMN和视频冲突的方法，关键代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
privatevoid initWebViewData() {
    webview.getSettings().setJavaScriptEnabled(true); // 开启Javascript支持
    webview.setScrollBarStyle(0);// 滚动条风格，为0就是不给滚动条留空间，滚动条覆盖在网页上
    webview.getSettings().setLoadsImagesAutomatically(true);// 设置可以自动加载图片
    webview.getSettings().setAppCacheEnabled(true);// 应用可以有缓存
    webview.getSettings().setDomStorageEnabled(true);// 设置可以使用localStorage
    webview.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);// 优先使用缓存
    webview.getSettings().setAppCacheMaxSize(10 * 1024 * 1024);// 缓存最多可以有10M
    webview.getSettings().setAllowFileAccess(true);// 可以读取文件缓存(manifest生效)
    webview.getSettings().setPluginState(PluginState.ON);
    webview.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
    // 加速WebView加载的方法
    webview.getSettings().setRenderPriority(RenderPriority.HIGH); // 提高渲染的优先级
     
    //判断html中是否包含视频<iframe width="300" height="150">标签
    if(htmlContent.indexOf("iframe") == -1 &amp;&amp; htmlContent.indexOf("IFRAME") == -1){
        // 设置加载进来的页面自适应手机屏幕
        webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
    }else{
        webview.setWebChromeClient(newWebChromeClient()); // chrom
        webview.getSettings().setPluginsEnabled(true); //Support Plugins, for example just like flash plugin.
    }
    //采用javascript控制width和height标签值
    String javascript="<script type='text/javascript'>" +
            "var y=document.getElementsByTagName('img');" +
            "for(var i=0;i<y.length;i++){" +
            "y[i].setAttribute('width','100%');"+
            "y[i].removeAttribute('height');"+
            "y[i].style.width='100%';"+
            "var str = y[i].getAttribute('style');" +
            "str = str.replace(/height\\b\\s*\\:\\s*\\d+\\px;?/ig, '');" +
            "y[i].setAttribute('style',str);}</script>";
     
    //html拼接
    htmlContent = htmlContent+javascript;
    webview.loadDataWithBaseURL("about:blank", htmlContent, "text/html", "utf-8", null);
}</pre>
<p>这段代码的核心就是在html代码加入javascript代码来控制width和height标签值，包括了<img title="解决Android中WebView视频无法播放的问题的图片 第2张" alt="解决Android中WebView视频无法播放的问题的图片 第2张" width="100%"/> 和 <img title="解决Android中WebView视频无法播放的问题的图片 第3张" alt="解决Android中WebView视频无法播放的问题的图片 第3张" style="width: 100%;" /> 这两种情况。</p>
<p>以上就是我解决Android中WebView LayoutAlgorithm.SINGLE_COLUMN导致视频不能播放的问题的总结，如果还有什么疑问，可以给我留言。</p>
<p>原创</p>
<p></iframe><p></p>
<div id="dxseo-related-posts"style="clear:both;"><h3 style="margin:20px 0 10px;padding:0;font-weight:bold;font-size:14px;">相关文章</h3><ul class="dxseo-rl-items"><li style="list-style-type: disc;" class="dxseo-rl-item"><a href="http://www.itxiechao.com/510.html"target="_blank"title="解决使用Mybatis时mysql报“too many connections”错误">解决使用Mybatis时mysql报“too many connections”错误</a></li><li style="list-style-type: disc;" class="dxseo-rl-item"><a href="http://www.itxiechao.com/276.html"target="_blank"title="快速删除文件夹中svn版本信息">快速删除文件夹中svn版本信息</a></li><li style="list-style-type: disc;" class="dxseo-rl-item"><a href="http://www.itxiechao.com/154.html"target="_blank"title="CodeIgniter笔记">CodeIgniter笔记</a></li><li style="list-style-type: disc;" class="dxseo-rl-item"><a href="http://www.itxiechao.com/130.html"target="_blank"title="java解压zip或rar压缩文件并解决中文乱码！">java解压zip或rar压缩文件并解决中文乱码！</a></li></ul></div>  

标签:Android

0 1