需求:swiper轮播里面,可能有图片也可能有视频。当swiper切换到视频时,视频以动画的样式展示(无按钮、进度条等默认播放控件),自动轮播取消,手动滑动切换取消。当视频播放完毕后,可以自动轮播,可以手动滑动切换。

找了个插件市场里的改的。(感谢大佬的插件!

第一步使用DCloud插件swiper-video-image - DCloud 插件市场

第二步:①video标签里加属性。实现隐藏按钮、进度条等默认播放控件

                        controls = "false"

              原swiperChange方法中添加判断,实现切换到视频时,自动轮播取消,手动滑动切换取消。

                    if (obj[this.typeName] === 'video'){
                       this.touch = true
                        this.autoplay = false
                    }    

                    swiper标签中加属性

                        :disable-touch = "touch"(是否禁止用户 touch 操作)

                        :autoplay="autoplay"(是否自动切换)

              ③使用@ended,用来判断视频当播放到末尾时触发事件,解开自动轮播,手动滑动切换。

                   @ended="videoEnded"

                videoEnded(){
                    this.touch = false
                    this.autoplay = true
                },

部分代码:

<template>
	<view class="content">
		<view class="screen-swiper-box">
			<swiper :current="index" @change="swiperChange" class="screen-swiper" indicator-dots="true" :circular="circular"
				:autoplay="autoplay" :interval="interval" duration="500" :style="[whStyle]" :disable-touch = "touch">
				<swiper-item v-for="(item, i) in list" :key="i" :id="i">
					<video v-if="item[typeName] == videoValue" :id="'myVideo-'+i" class="myVideo" :src="item[linkName]"
						controls = "false" objectFit="cover" enable-progress-gesture="false" show-loading="true"
						play-btn-position="center" show-fullscreen-btn="true" :style="[whStyle]"
						@click="swiperClick(item,i)" @ended="videoEnded"></video>
					<image v-if="item[typeName] == imgvalue" class="swiperImage" :src="item[linkName]" mode="scaleToFill"
						:style="[whStyle]" @click="swiperClick(item,i)">
					</image>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			index: 0, // 当前页
			videoCtx: '',
			touch:false,
		}
	},
	methods: {
		videoEnded(){
			this.touch = false
			this.autoplay = true
		},
		swiperChange(e) {
			// 获取上一个
			let obj = this.list[this.index]
			if (obj[this.typeName] == this.videoValue) {
				// console.log('暂停', this.index)
				this.videoCtx = uni.createVideoContext('myVideo-' + this.index, this)
				this.videoCtx.pause()
			}

			// 获取当前
			this.index = e.detail.current // 更新当前index
			obj = this.list[this.index]
			if (obj[this.typeName] == this.videoValue && this.autoPlayVideo) {
				// console.log('播放', this.index)
				this.videoCtx = uni.createVideoContext('myVideo-' + this.index, this)
				this.videoCtx.play()
			}
			this.$emit('swiperChange', this.index)
			if (obj[this.typeName] === 'video'){
				this.touch = true
				this.autoplay = false
			}
		},
	},
}
</script>

                

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐