微信小程序不使用插件，渲染富文本中的视频，图片自适应，plus版本

最新推荐文章于 2025-07-07 16:49:08 发布

哥很冷漠

最新推荐文章于 2025-07-07 16:49:08 发布

阅读量1.1k

点赞数 13

CC 4.0 BY-SA版权

文章标签：微信小程序音视频小程序

本文链接：https://blog.csdn.net/qq_63608386/article/details/136717386

本文讲述了如何在微信小程序中处理原生rich-text不支持的视频渲染问题，通过字符串操作和匹配，实现图片自适应，并针对特定的百度富文本编辑器生成的格式处理视频嵌入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序原生的rich-text不支持渲染视频，所以需要处理后显示，主要用了字符串切割以及匹配
富文本图片自适应的问题
当我们从后端拿到富文本数据时，我们利用replace方法去修改图片的样式，保证图片与手机宽度保持一致

//richtext为富文本
let content = richtext.replace(/<img/gi, '<img style="max-width:100%;height:auto"')   //图片自适应

如果富文本出现莫名的空白区域，可能是富文本中包含有换行标签，我们就将
标签替换掉

//richtext为后端传过来的富文本
dealRichText(richtext) {
	let content = richtext.replace(/<img/gi, '<img style="max-width:100%;height:auto"').replace(/<br\/>/g, '');
	return content;
}

渲染视频
网上也有不少方法，但是我的富文本是用百度富文本编辑器生成的，有些复杂，是这样的：

<p>
    随便的文字
</p>
<p>
    <img src="https://weiqing.kuxia.top/uploads/20220720/0fa5869614f227c88c7c89737836814c.png" title="" alt=""/>
</p>
<p>
    <video class="edui-upload-video vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" data-setup="{}">
        <source src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" type="video/mp4"/>
    </video>
    <video class="edui-upload-video vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.m