解决video标签层级过高，遮挡住了页面fixed元素~

编写详情页面的时候，因为详情内容限制可以上传视频和图片，但是页面底部也有对应的固定元素在底部，就导致如果回显到video元素时，会遮挡到底部的固定元素~

一开始考虑使用cover-view，但是因为这个详情页充满不确定性，可能单个视频元素，也可能多视频元素，还有可能没有视频元素。而且，之前使用这种方式添加的元素一般都定位在对应video或map宽高之内，这次的话位置感觉不是很合适使用这个方式，因此也就没有尝试使用这种方式。

目前采用的是v-html方式，直接在页面插入video，从而实现fixed元素可以遮盖住video，但是相应的，没有了video的默认操作栏，但是依然可设置点击播放暂停video。 （目前，该效果至少满足当前项目需求~）

<template>
	<view class="myVideo_view" v-html="innerHtml" :id="id" :change:id="MyVideo.updateId" @click="MyVideo.handelPlay" ></view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: () => ({}),
			}
		},
		data() {
			return {
				innerHtml: '',
				id: ''
			};
		},
		created() {
			this.initVideoHtml();
		},
		methods: {
			isHttpOrHttps(url) {
				const regex = /^(http|https):\/\//;
				return regex.test(url);
			},
			initVideoHtml() {
				let { src } = this.item
				this.id = src // 我这因为可能多个视频，且有可能id重复，索性用最简单的视频地址赋值id了，避免重复
				src = this.baseUrl + src
				let bool = this.isHttpOrHttps(src)
				if(!bool) {
					src = plus.io.convertLocalFileSystemURL(src);
				}
				this.innerHtml = `<video class="video" id="Video${this.item.src}" src="${src}" width="100%" height="100%" style="object-fit: contain;" />`;
			},
			// 通知父组件播放完成
			ended() {
				this.$emit('onEnded')
			}
		},
	};
</script>
<script module="MyVideo" lang="renderjs">
	export default {
		data() {
			return {
				id: '',
				video: null,
				play: false
			}
		},
		computed: {
			videoId() {
				return 'Video' + this.id
			}
		},
		mounted() {
			this.initVideoElement()
		},
		methods: {
			initVideoElement() {
				let video = document.getElementById(this.videoId)
				this.video = video
				video.addEventListener('loadedmetadata', () => {
					this.video.play().then(res => {
						this.video.pause()
					})
				})
				video.addEventListener('ended', () => {
					this.video.pause()
					this.$ownerInstance.callMethod('ended')
				})
			},
			// 播放 暂停
			handelPlay() {
				if(!this.video) return
				this.play = !this.play
				!this.play ? this.video.play() : this.video.pause()
			},
			updateId(id) {
				this.id = id
			},
		}
	}
</script>
<style scoped>
	.myVideo_view {
		height: 100%;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #000;
	}
</style>

上面的代码是整理封装后组件，可以参考直接调用~

直接使用video的效果：

使用组件后的效果：