uniapp坑之rich-text标签渲染富文本时video会消失.

最新推荐文章于 2025-09-20 12:48:06 发布
原创 最新推荐文章于 2025-09-20 12:48:06 发布 · 3.6k 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5 #vue.js #javascript

在uniapp项目中，使用rich-text标签渲染video时，视频可能无法正常显示。本文介绍了一种解决方案，通过使用uParse富文本解析插件替代原生rich-text，成功解决视频渲染问题。

uniapp坑之rich-text标签渲染富文本时video会消失.

最近在搞uniapp项目，做视频详情页渲染时，遇到rich-text标签渲染video标签一直无法显示视频的问题。经查询
在这里插入图片描述
上图链接 uniapp-richtext标签

rich-text无法渲染，我们可以去插件市场 找uParse 富文本解析插件进行替换
uParse 地址：uParse插件链接

uniApp小程序解析富文本，视频无法显示问题
sunshinebotanka的博客
04-18 2681
uniApp小程序解析富文本，视频无法显示问题
uniapp解析富文本，视频无法显示问题
qq_36158551的博客
08-30 732
rich-text 无法处理 video，uni-app 文档中关于 rich-text 介绍中明确说明 rich-text 支持什么（），其中并不包含 video。
uniapp小程序使用富文本不能展示视频
meng2lin的博客
04-28 3372
uniapp小程序使用富文本 在开发小程序中，原来用的rich-text标签展示的富文本，但是里面的视频的话不会展示，这样的情况我们如何解决呢？ 小程序中使用mp-html 网址 uniapp引入 首先我们在插件市场中导入到项目中 mphtml在template中的使用 <template> <view> <mp-html :content="content" /> </view> </template> <script&gt
uni-app富文本解析利器u-parse组件深度实战
最新发布
weixin_29092787的博客
09-20 1242
u-parse是专为 uni-app 框架设计的高性能富文本解析组件，支持将 HTML 与 Markdown 内容跨平台渲染为原生或 web 兼容视图。其核心目标是解决多端（H5、小程序、App）富文本展示中的兼容性问题。在u-parse中，VNode 通常表现为如下格式的对象：name: 'view', // 对应的小程序组件名attrs: { class: 'para' }, // 属性集合style: { color: 'red' }, // 样式对象。
【uni-app】rich-text 无法处理 video 的解决办法
sayyy的专栏
12-19 6470
前言 Hbuilder X 2.7.14.20200618 rich-text 无法处理 video uni-app 文档中关于 rich-text 介绍中明确说明 rich-text 支持什么（参考这里），其中并不包含 video 。 解决办法 在uni-app插件市场搜索parse插件使用。 parse插件有很多，包含的功能也不尽相同。 我播放 video 时使用的是uParse 富文本解析。 uParse 富文本解析插件的使用 在项目中导入插件。这步不详述了。不会的需要补补关于uniapp的使用
uniapp rich-text 小程序渲染不了富文本视频
weixin_43358822的博客
08-12 2033
uniapp rich-text 渲染富文本视频
uniapp微信小程序uParse 富文本解析不能解析iframe标签，视频无法展示的问题
weixin_44768151的博客
09-23 1090
/ 注意：微信小程序的<video>组件不支持style属性，需要使用CSS类或内联样式。// video标签添加style属性：max-width:100%;// img标签添加style属性：max-width:100%;// 构建video组件，设置max-width和height属性。// 修改所有style里的width属性为max-width:100%// 去掉video标签里的style、width、height属性。// 去掉img标签里的style、width、height属性。
uniapp使用v-html无法解析其中的video标签
荷逸的博客
12-09 3186
引言 开发一套系统，前端官网使用v-html解析时能解析出其中的video标签，在页面上正常展示。但是使用uniapp的时候无法解析出来 原因 uniapp底层是封装的小程序技术。使用开发者工具观察，代码 <view class="content" style="padding: 0 4vw;" v-html="content"></view> 在微信开发者工具中现实的标签是，是解析富文本，如下图所示，其中带有video标签，但是并没有在页面展示出来 解决方法 将video标签拆分
uniapp微信小程序video不显示，无法播放
weixin_47078502的博客
03-22 5208
uniapp微信小程序video不显示，无法播放
关于小程序rich-text组件（不支持视频节点、图片显示问题）
gmy00111的博客
05-06 1363
项目中遇到问题，后台配置富文本内容，小程序渲染的时候出现图片显示问题和视频节点不显示，排查过程中发现图片显示没问题，返回数据就是这么大的尺寸，那就是怎么适配了（下面直接上代码），视频节点不显示问题，看了下微信文档，这个组件是不支持vedio标签的，说了这么多直接上代码吧！
小程序 rich-text 富文本回显 解决video节点不显示问题
IT技术宅-北方的刀郎
11-01 2652
letcontent = `<p><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594980742996&di=ecacd5a309ec53780fcc0b4eb10a2f49&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F56%2F12%2F01300000164151121576.
uni-app 自定义组件展示html富文本内容，可实现富文本html内容中 图片展示、视频播放、音频播放。
06-10
uni-app 富文本内容利用html2json转换成对应类似控件 rich-text 对应的数组资源格式后进行展示的自定义组件、可以进行富文本html内容中 图片展示、视频播放、音频播放。
uniapp中展示富文本包含video，由于video层级过高遮挡住导航栏、菜单等
qq_33444716的博客
06-10 2952
video层级过高遮挡住导航栏、菜单等
【uniapp- 富文本编辑器editor不能解析某些标签导致有些内容不显示的解决方案】
weixin_43335008的博客
11-27 1337
uniapp的富文本编辑器editor解析不了富文本编辑器解析不了article 标签和 section 标签。
uniapp微信小程序富文本、小程序富文本、rich-text解决video问题
羽渡尘的博客
12-05 1258
我直接使用的 mp-html。具体的直接看官方文档吧。
微信小程序，富文本，屏幕方向，滑动事件
曳猫的博客
12-04 611
微信富文本 <rich-text nodes="{{data}}"></rich-text> 解决富文本图片溢出 //在数据后面添加 data.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')
uniapp解析富文本，video标签不识别的问题
m0_63811812的博客
02-19 507
文档中是没有video标签的，也就是被排除在外了，想要识别video的话，可以用 uni-app/mpvue 的富文本解析自定义组件-----uParse 富文本解析。
小程序 · rich-text富文本回显：解决video不显示 图片自适应
weixin_42091247的博客
05-10 1231
【代码】小程序 · rich-text富文本回显：解决video不显示 图片自适应。
uniapp微信小程序video不显示，不生效
A1abcvbnm的博客
06-07 1835
开发者工具video不显示，无法播放，也没有任何错误，就是不显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值