解决小程序富文本显示视频问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了解决小程序富文本显示视频问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. 首先用小程序原生的 rich-text 肯定是不行的，它video的HTML节点和属性都不支持的

2. 采用安装插件的方法去处理（强烈推荐：mp-html，可用于多端）

3. 引入

4. 使用

5. 效果

1. 首先用小程序原生的 rich-text 肯定是不行的，它video的HTML节点和属性都不支持的

2. 采用安装插件的方法去处理（强烈推荐：mp-html，可用于多端）

安装：

# 通过 npm 获取
npm install mp-html
# 或通过 yarn 获取
yarn add mp-html

需要升级时：

# 通过 npm 升级
npm update mp-html
# 或通过 yarn 升级
yarn upgrade mp-html

git 方式

# 通过 github 获取
git clone https://github.com/jin-yufeng/mp-html.git
# 或通过 gitee 获取
git clone https://gitee.com/jin-yufeng/mp-html.git

3. 引入

1、本方法仅适用于微信、QQ 小程序

在小程序项目根目录下通过 npm 安装组件包
开发者工具中勾选使用 npm 模块（若没有此选项则不需要）并点击工具 - 构建 npm
在需要使用页面的 json 文件中添加

{
  "usingComponents": {
    "mp-html": "mp-html"
  }
}

2、源码引入

本方法适用于所有平台
将源码中对应平台的代码包（dist/platform）拷贝到 components 目录下，更名为 mp-html
在需要使用页面的 json 文件中添加

{
  "usingComponents": {
    "mp-html": "/components/mp-html/index"
  }
}

4. 使用

在需要使用页面的 wxml 文件中添加

<mp-html content="{{html}}" />

在需要使用页面的 js 文件中添加

Page({
  onLoad () {
    this.setData({
      html: '<div>Hello World!</div>'
    })
  }
})

// 记得用正则给视频添加宽度

let info = '后台返回的数据'
info = info.replace(/<video/gi, '<video style="width:100%"')
       .replace(/<section/g, '<div')
       .replace(/\/section>/g, '\div>');

// 其次看你后台返回的视频是拼接了域名还是没有