记录:uni运行H5使用原生video标签、富文本查看图片等

记录一下第一次遇到的一些问题：

1.由于uniapp运行到h5中，video标签将被uni转译成uni-video标签，而uni-video标签在h5中有很多无法使用的属性 例如：无法显示静音按钮，无法使用倍速、画中画等；但原生的video是可以的。于是第一步先到处查阅资料看有没有什么插件可供h5使用并且显示静音按钮等完善的功能，在不懈努力下找到了一个x-video插件，但兼容的不够完善，被弃用；后又使用了video.js来完善，但静音按钮、进度条等样式太“原始化”了，不太雅观，又被弃用；中途还使用了很多类似于“x5-video-player-type="h5" ”的这种属性 ，但是也毫无作用，因为根本不是原生的video标签(内心os：心已死) ；最后终于在使用富文本的时候，突然发现可以自定义template作为富文本，再供盒子使用！(为什么没有早点想到，感觉脑子很木) 

//关于uniapp中想使用原生h5标签
	let template =
		`<video style="max-width: 100%;" controls>
				<source src=${data.video} type='video/mp4'>
				<source src=${data.video} type="video/ogg">
				您的浏览器不支持Video标签。
		</video>`
	this.videoSrc = template;

2. 富文本查看图片 相关代码：

<template>
	<view class="show-content previewImg" v-html="article" v-if="article"
			    @click.stop="previewImg($event,article)"></view>
</template>

export default {
		data() {
			return {
				// 富文本内容
				article: '',
			}
		},
	onLoad(options) {
			this.getInfo(options.id);
		},
		methods: {
            // 获取富文本图片预览当前下标 item当前的富文本内容 indexs当前项的下标
			previewImg(event, item) {
				// console.log(event, item, '---点击');
				let imgs = item.match(/<img[^>]+>/g); //把img所有节点的图片选择出来
				if (imgs) {
				var imgArr = []; //保存图片路径
				//对图片进行处理从而获取路径
			for (var j = 0; j < imgs.length; j++) {
				imgs[j].replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {
			    imgArr.push(capture)
				    })
			    }
				// 获取要点击的富文本父盒子
				var box = document.getElementsByClassName('previewImg')
				//对获取的项进行循环
				//当点击的项的下标和循环的当前项下标相等
				// 通过父节点获取所有图片
				var nodes = Array.from(box[0].querySelectorAll('img'));
				// 然后通过点击的节点知道当前节点的位置了
				let xx = function(event) {
					event.stopPropagation()
					var target = event.target;
					console.log(target.nodeName);
					// 判断点击的节点是否是图片
					if (target.nodeName !== 'IMG') {
						box[0].removeEventListener('click', xx, false);
					}
					if (target.nodeName === 'IMG') {
						// console.log(nodes.indexOf(event.target));
						// 获取点击图片的当前下标
						let indez = nodes.indexOf(event.target)
						//最后进行图片预览
						uni.previewImage({
							current: imgArr[indez],
							urls: imgArr,
							success: (res) => {
								if (box[0]) {
									box[0].removeEventListener('click', xx, false);
								}
							}
						});
					}
				}
				box[0].addEventListener("click", xx)
			}
		},
	    // 获取数据
		getInfo(id) {
			this.$util.request('xxx', {
					id
			}, true, 'get', (res => {
				let {
					code,
					msg,
					data
			} = res
			if (code == 200) {
           //关于修改富文本中的img图片大小和视频 正则表达式中间用|隔开表示“或”
				this.article = data.content.replace(/\<img|\<iframe/g, function(match) {
					switch (match) {
							case "\<img":
							return '<img style="max-width:100%;height:auto" ';
							case "\<iframe":
							return '<iframe webkitallowfullscreen="true" mozallowfullscreen="true" style="width:100%;height:100%" ';
							}
						})
        //在第一次进入页面获取到数据后就执行一次previewImg,否则第一次点击是预览不了的
					this.$nextTick(() => {
						this.previewImg(null, this.article)
					});
				} else {
						uni.showToast({
							title: msg,
							icon: 'none'
						})
					}
				}))
			},
        }

参考的相关文章链接：uni-app v-html图片点击预览 - 简书

3.修改富文本中的图片样式：replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');