前言

• Hbuilder X 2.7.14.20200618

rich-text 無法處理 video

uni-app 文檔中關于 rich-text 介紹中明確說明 rich-text 支持什么（參考這里），其中并不包含 video 。

解決辦法

在uni-app插件市場搜索parse插件使用。
parse插件有很多，包含的功能也不盡相同。

我播放 video 時使用的是uParse 富文本解析。

uParse 富文本解析插件的使用

在項目中導入插件。這步不詳述了。不會的需要補補關于uniapp的使用知識。
導入成功后，多出目錄項目根目錄/components/u-parse。

在頁面中導入插件。

import uParse from '@/components/u-parse/u-parse.vue';

替換rich-text

<!-- <rich-text :nodes="content"></rich-text> --> <u-parse :content="content" />

處理 vedio 標簽樣式

默認的vedio樣式需要修改時，可以使用正則表達式替換。

新建 js 文件 ： richTextUtil.js

/*** 處理富文本里的圖片寬度自適應* 1.去掉img、video標簽里的style、width、height屬性* 2.修改所有style里的width屬性為max-width:100%* 3.img、video標簽添加style屬性：max-width:100%;height:auto* 4.去掉<br/>標簽* @param html* @return string*/ function formatRichText (html) {// 去掉img標簽里的style、width、height屬性let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');return match;});// 去掉video標簽里的style、width、height屬性newContent= html.replace(/<video[^>]*>/gi,function(match,capture){match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');return match;});// 修改所有style里的width屬性為max-width:100%// 去掉所有style里的font-size屬性newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');match = match.replace(/font-size:[^;]+;/gi, '');return match;});// 去掉<br/>標簽newContent = newContent.replace(/<br[^>]*\/>/gi, '');// img標簽添加style屬性：max-width:100%;height:autonewContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin:0px auto;"');// video標簽添加style屬性：max-width:100%;height:autonewContent = newContent.replace(/\<video/gi, '<video style="max-width:100%;height:auto;display:block;margin:0px auto;"');return newContent; }export default {formatRichText, };

引入js庫

import richTextUtil from '@/common/richTextUtil.js';

調用方法

this.content = richTextUtil.formatRichText(res.content);

參考

https://sayyy.blog.csdn.net/article/details/107954323

總結

以上是生活随笔為你收集整理的【uni-app】rich-text 无法处理 video 的解决办法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。