Android WebView 加载远程自定义样式（视频样式）

需求

用WebView加载富文本的形式展示内容
其中包括视频，要求各端（Android、iOS、PC）视频样式统一

我们知道，三端浏览器内核不同（这也是单网页判断当前设备在哪个操作系统的基本依据），原生 video 标签所展示的视频样式更是差别很大！

可选方案

1. 本地加载

将 js文件 及 css样式 放到asset 文件夹中，打入 apk 包

2. 远程加载

将 js文件 及 css样式 放到文件服务器（CDN），远程加载

确定方案

由于 本地加载 更改样式需要 热更新或发版，故采用 远程加载 的方式

代码实现

如何实现呢？
WebView 加载网页url 或者 富文本（html），原理是一样的，虽然这是废话！

将服务端返回的 富文本内容 封装成 html，然后加载就可以了

HTML 结构示例

所以只要按照上述结构，用字符串拼接起来就可以了！

    /** 
      *  其中 content 就是接口返回的内容，video是一条测试数据
      *  RiseWebPath.TaskAliplayerCss 等参数，是远程样式地址
      */
    private fun buildHtml(content: String): String {
        var html =
                "" +
                        "" +
                        "" +
                        "" +
                        "" +
                        "" +
                        "" +
                        "" +
                        "" +
//                        "$content"+
                        "" +
                        "" +
                        ""

        return html
    }

就是这样，这就可以了！

---

题外话

加载 js 后，会将 video标签 替换成 阿里云web端播放器，使用的是阿里的默认样式

object RiseWebPath {
    /**
     *  任务 视频 样式
     */
    val TaskAliplayerCss: String? = "https://g.alicdn.com/de/prismplayer/2.7.2/skins/default/aliplayer-min.css"
    val TaskAliplayerJs: String? = "https://g.alicdn.com/de/prismplayer/2.7.2/aliplayer-min.js"
    
}

---

适配问题（2018.12.12）

魅族手机可能会有问题，因为其浏览器内核不支持下面这种方法调用。

 "" +

方法调用不生效，还未找到更合适的适配方法。

除了这个，我还遇到一个 魅族手机加载H5页面，显示空白的问题，是因为不支持高版本JS语言特性导致的。

---

莫听穿林打叶声，何妨吟啸且徐行

うずまき ナルト