uniapp 中rich-text 处理富文本视频demo（整理）

<template>
	<view>
		<view v-for="(content, index) in contentArr" :key="index">
			<rich-text :nodes="content" @click="showImg(content)"></rich-text>
			<video v-if="videoArr[index] !== null" :src="videoArr[index]" controls :style="{ width }"></video>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'bctos-rich-text',
		props: {
			nodes: {},
			width: {
				type: String,
				default: '100%'
			}
		},
		data() {
			return {
				contentArr: [],
				videoArr: []
			};
		},
		watch: {
			nodes(val) {
				this.parseVideo();
			}
		},
		created() {
			this.parseVideo();
		},
		methods: {
			// 富文本点击查看大图
			showImg(content) {
				// 富文本
				const richContent = content;
				// 判断含有图片
				if (richContent.indexOf("src") >= 0) {
					const imgs = [];
					richContent.replace(/]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {
						imgs.push(capture);
					})
					uni.previewImage({
						current: imgs[0], // 当前显示图片的链接
						urls: imgs
					})
				}
			},
			parseVideo() {
				this.nodes =
					'<p><img class="wscnph" src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180615/5b2254e8N414e6d3a.jpg" width="500" /><img src="https://media.w3.org/2010/05/sintel/trailer.mp4" alt="" /><video id="myVideo" autoplay="autoplay" width="300" height="150"><source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" /></video></p>'
				if (typeof this.nodes != 'string') {
					//不是HTML字符串格式的暂不处理
					this.contentArr[0] = this.nodes;
					this.videoArr[0] = null;
					return false;
				}

				//同步解决如果图片太大超出手机显示界面的问题
				let nodes = this.nodes.replace(/<img/g, '<img style="max-width:98%!important;height:auto;"');
				let arr = nodes.split('</video>');
				let reg = /<video([sS]*)/g;

				for (let i in arr) {
					var item = arr[i];
					var urlMatch = item.match(/<video[sS]*src="(.*?)"/);
					if (urlMatch && urlMatch.length > 1) {
						this.videoArr[i] = urlMatch[1];
					} else {
						this.videoArr[i] = null;
					}

					this.contentArr[i] = item.replace(reg, '');
				}
				this.$forceUpdate()
			}
		}
	};
</script>

<style></style>
转载：https://ext.dcloud.net.cn/plugin?id=6712

最后

以上就是合适母鸡为你收集整理的uniapp 中rich-text 处理富文本视频demo（整理）的全部内容，希望文章能够帮你解决uniapp 中rich-text 处理富文本视频demo（整理）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。