使用插件视频(video)、图片混合轮播 - DCloud 插件市场

因为只需要兼容app端,修改fuyu-MixSwiper文件部分代码

<template>
	<swiper class="swiper" circular :autoplay="autoplaySwiper" :current="swiperCurrent" @change="swiperChange">
		<swiper-item v-for="(item,index) in list" :key="index">
			<image class="swiper-image" v-if="isImageUrl(item.url)" :src="item.url" mode="scaleToFill" lazy-load />
			<div style="height: 100%;width: 100%;position: relative;" v-else>
				<!-- #ifdef APP -->
				<MyVideo :item="item" :isPlay="!isShow && videoId == item.id" @onEnded="endVideo(item.id)" />
				<!-- #endif -->
			</div>
		</swiper-item>
	</swiper>
</template>

MyVideo.vue文件initVideoHtml方法里innerHtml里video标签添加controls属性

			initVideoHtml() {
				let { url } = this.item
				let bool = this.isHttpOrHttps(url)
				if(!bool) {
					url = plus.io.convertLocalFileSystemURL(url);
				}
				this.innerHtml = `<video class="swiper-video" id="Video${this.item.id}" src="${url}" width="100%" height="100%" style="object-fit: contain;" controls autoplay/>`;
			},

更多推荐