uniapp打包IOS，video标签层级过高

最新推荐文章于 2024-05-24 11:06:14 发布

wikn116

最新推荐文章于 2024-05-24 11:06:14 发布

阅读量845

点赞数

分类专栏： uniapp IOS 文章标签： video替换 image标签视频第一帧阿里云存储 CSS样式

本文链接：https://blog.csdn.net/wd1073351726/article/details/124752678

版权

uniapp 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

IOS

1 篇文章 0 订阅

订阅专栏

video标签层级太高，可以使用image标签来代替，src里面的item为视频地址，加上后面的，则会显示视频第一帧的图片，博主这里用的是阿里云存储视频，其他的未测试过。css则为模仿视频标签的三角形和阴影

<image style="position: relative;" mode="aspectFit" :src="item + '?x-oss-process=video/snapshot,t_0,f_jpg'">
</image>
	<view class="uni-video-cover" @click="">
		<view class="uni-video-cover-play-button"></view>
	</view>

	.uni-video-cover {
		bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: rgba(1, 1, 1, .5);
		z-index: 5;
	}

	.uni-video-cover,
	.uni-video-slots {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.uni-video-cover-play-button {
		width: 40px;
		height: 40px;
		background-size: 50%;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		cursor: pointer;
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAeCAYAAAAy2w7YAAAAAXNSR0IArs4c6QAAAWhJREFUSA1j+P///0cgBoHjQGzCQCsAtgJB/AMy5wCxGNXtQ9iBwvoA5BUCMQvVLEQxHpNzDSjkRhXLMM3GKrIeKKpEkYVYjcUu+AMo3ALE3GRZiN1MvKKPgbIRJFuG10j8koeA0gZEW4jfLIKyf4EqpgOxMEELCRpFnIJ3QGU5QMyM00LizCFa1SWgSkeslhFtBGkKVwGVy6FYSJp+klR/A6quB2JOkIWMIK0oNlOf8xBoZDE9LAI7nYn6HsBq4l96WHQEaLUpAyiOaASeAM2NgvuPBpaACt82IEYtfKls0UagecpwXyAzqGTRdaA57sjmYrAptAjUsCkGYlYMg9EFyLQI1IiZB8Ti6Obh5JNh0QmgHlOcBuKSIMGi50C18UDMiMssvOJEWPQLqKYbiHnxGkRIkoBF24DyaoTMIEoeh0W3geI+RBlArCI0iz4D+RVAzEasfqLVAQ19AcSg5LoYiKWI1kiiQgCMBLnEEcfDSgAAAABJRU5ErkJggg==);
	}