Video是属于原生组件的,层级是最高的,无法被其他内容所覆盖,当然也不会跟着div的overflow-y:scroll进行滑动,只会一直浮在表层,挡住其他元素
uni的官方文档解释是这样的:vue页面层级覆盖解决方案
cover-view
更适合在视频上边添加某些组件,比如播放按钮或者什么功能,这个比不符合我的需求plus.nativeObj.view
这个是安卓的原生写法,看了很多资料,发现是能解决相当多种类的问题,但是毕竟原生语法会难一些,在时间不够的情况下很难去学好怎么使用原生语言满足当前的需求
但如果时间充足且有条件的基础下可以采用这个方法
https://www.html5plus.org/doc/zh_cn/video.htmlsubNVue
首先就被舍弃了,只因我用的不是NVue
最后在网上参考了其他人的一份解决方案,正好解决了我的问题直接上代码
- 创建一个uni组件,通过用iframe作为主体,嵌入video组件,让页面跟着div滑动
<template>
<iframe :onload="onloadCode" style="width:100%;height:100%;border:1px solid #fff;background: #000;"></iframe>
</template>
<script setup>
const props = defineProps({
videoUrl: String
})
let onloadCode = `
const url = '${props.videoUrl}'
this.contentWindow.document.body.innerHTML = '<video style="width: 100%;height: 100%" controls="controls" src="'+url+'"></video>';
`
</script>
- 在页面中使用新建的组件
<MyVideo :videoUrl="videoUrl"></MyVideo>
这样就完美解决了滑动的问题,完美~!
