解决小程序富文本显示视频问题

目录

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 文件中添加

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

Page({  onLoad () {    this.setData({      html: '
Hello World!
'    })  }})

 

// 记得用正则给视频添加宽度let info = '后台返回的数据'info = info.replace(/

5. 效果

  

插件地址：小程序富文本组件小程序富文本组件https://jin-yufeng.gitee.io/mp-html/

来源地址：https://blog.csdn.net/u014678583/article/details/130962024