video层级太高向上滑动遮住自定义导航栏

video向上滑动遮住自定义导航栏

1.1 封装一个视频组件

<template>
	<view>
		<iframe :onload="onloadCode" style="width:100%;height:100%;background: #000;"></iframe>
	</view>
</template>

<script>
	export default {
		name: "MyVideo",
		props: ['videoUrl'],
		data() {
			return {
				onloadCode: '',
			};
		},
		created() {
			this.onloadCode = `
			const url = '${this.videoUrl}'  
			                this.contentWindow.document.body.innerHTML = '<video style="width: 100%;height: 100%" controls="false" loop="true" autoplay="true"  src="'+url+'"></video>';  
			`
		}
	}
</script>

1.2 在父组件引用

<template>
  <view>
    <view class="head-top">
    <!-- 自定义头部内容 -->
    </view>
    <view v-for="(item, index) in aspect_video">
        <newVideo class="card-upload-icon" :videoUrl="item"></newVideo>
    </view>
  </view>
</template>
<script>
import newVideo from './newVideo.vue'
	export default {
		components: {
			newVideo
		},
	}
</script>