HBuilderX使用uniapp中的video标签开发视频应用APP，出现视频覆盖＜view＞图层无法遮住等问题如何解决？-Toy模板网

这篇具有很好参考价值的文章主要介绍了HBuilderX使用uniapp中的video标签开发视频应用APP，出现视频覆盖＜view＞图层无法遮住等问题如何解决？。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、普通情况：图片要遮住<video></video>

请使用cover-image或cover-view

cover-image | uni-app官网https://uniapp.dcloud.net.cn/component/cover-image.html#cover-image cover-view | uni-app官网https://uniapp.dcloud.net.cn/component/cover-view.html#cover-view

HBuilderX使用uniapp中的video标签开发视频应用APP，出现视频覆盖＜view＞图层无法遮住等问题如何解决？,uni-app,JavaScript&TypeScript,CSS2/CSS3/LESS/SASS/SCSS/HTML,uni-app,cover-image,cover-view,video遮不住,遮住视频播放

情况1：如上图，注意要使用以下位置才能达到遮住的效果

//方法1：放入video中----------------------------------------

<video>
    <cover-image></cover-image>
</video>



//方法2：放入video同层级----------------------------------------

<video></video>
<cover-image></cover-image>

//放后面or放前面都可以

<cover-image></cover-image>
<video></video>

----------------------------------------

//然后在css中定义cover-image的位置为
position: absolute;
right:XXX;//定位
top:XXX;//定位

情况2：如上图，就直接用cover-view自定义一个顶部组件，就可以遮住视频了

2、和swiper组件混搭使用，出现左右滑动video的时候，浮动在其上面的cover-view或cover-image会有飘忽不定，位置错位的情况，如何解决？

如上图，当左右滑动swiper-item的时候，就出现image的图标位置错位了文章来源地址https://www.toymoban.com/news/detail-592410.html

//一定要将标签放入<xxx></xxx>之间----------------------------------------
<uni-swiper-dot>
	<swiper>
		<swiper-item v-for="(item,index) in items">
			<image:src="item.videoCover">
                //一定要放在这里
				<cover-image src="/img/xxx.png"></cover-image>
                //一定要放在这里
				<cover-view>这里放内容</cover-view>
			</image>
		</swiper-item>
	</swiper>
</uni-swiper-dot>

到了这里，关于HBuilderX使用uniapp中的video标签开发视频应用APP，出现视频覆盖＜view＞图层无法遮住等问题如何解决？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！