uniapp，视频播放组件

一、业务需求和问题

在详情页面，播放视频，使用uniapp的video组件，在真机上运行时，视频悬浮在屏幕无法滑动，希望滑动页面，视频会跟随页面滑动

二、问题截图

二、问题分析

vedio原生组件层级高于前端组件
Video是属于原生组件的，层级是最高的，无法被其他内容所覆盖，当然也不会跟着div的overflow-y:scroll进行滑动，只会一直浮在表层，挡住其他元素

三、解决办法

封装一个组件，利用v-html，播放视频

<template>
	<view v-html="videoHtml" id="dom-video" class="dom-video" :style="{
		width: width,
		height: height
	}"></view>
</template>

<script>
	export default {
		name: "myVideo",
		props: {
			src: {
				type: String,
				required: true
			},
			controls: {
				type: Boolean,
				default: true
			},
			autoplay: {
				type: Boolean,
				default: false
			},
			muted: {
				type: Boolean,
				default: false
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '400rpx'
			},
			loop: {
				type: Boolean,
				default: false
			},
			poster: {
				type: String,
				default: ''
			},
			preload: {
				type: String,
				default: 'auto'
			}
		},
		data() {
			return {
				videoHtml: '',
				randomStr: Math.floor(Math.random() * 1000) + '-' + Math.floor(Math.random() * 1000)
			}
		},
		mounted() {
			this.initVideoHtml()
		},
		methods: {
			// 初始化视频
			initVideoHtml() {
				this.videoHtml = `<video
					src="${this.src}"
					id="dom-html-video_${this.randomNum}"
					class="dom-html-video"
					${this.autoplay ? 'autoplay' : ''}
					${this.loop ? 'loop' : ''}
					${this.controls ? 'controls' : ''}
					${this.muted ? 'muted' : ''}
					${this.poster ? 'poster="' + this.poster + '"' : ''}
					preload="${this.preload}"
					playsinline
					webkit-playsinline
					disablepictureinpicture="false"
					controlslist="nodownload"
					width="100%"
					height="100%"
					style="object-fit: contain;padding:0;border-radius:5px;"
				>
					<source src="${this.src}" type="video/mp4">
					<source src="${this.src}" type="video/ogg">
					<source src="${this.src}" type="video/webm">
				</video>`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dom-video {
		background: #000;
		border-radius: 10rpx;
	}
</style>

使用

<my-video src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"></my-video>

该办法只是简单的在App端播放视频，其他业务需求没测试过