uniapp：轮播里如何加入视频

template代码

主要使用uniapp swiper 根据后端传递type判断是图片，还是视屏

<view class="screen-swiper"><swiper style="height: 900rpx;" @change="change" class="screen-swiper" indicator-dots="true" circular="true" :autoplay="!autoplay"><swiper-item style="width: 750rpx;height: 900rpx;" @click="PlayVideo(item)" v-for="(item, index) in videoList" :key="item.id"><image style="width: 750rpx;height: 900rpx;" v-if="!item.isPlay" :src="item.src" mode="aspectFill"></image>    <video style="width: 750rpx;height: 900rpx;" v-else id="myVideo" :src="item.vide" :autoplay="true" :enable-progress-gesture="false" loop muted show-play-btn controls objectFit="cover" @pause="suspend" @ended="suspend"></video></swiper-item><swiper-item style="width: 750rpx;height: 900rpx;" v-for="(item, index) in imageList" :key="item.id"><image style="width: 750rpx;height: 900rpx;" :src="item.src" mode="aspectFill"></image></swiper-item></swiper></view>

script内代码

data代码

autoplay: false,
list: [{id: '',isPlay: false,type: 1,src: ''}
]

computed代码

videoList() {return this.list.filter(item => {return item.type == 2;});
},
imageList() {return this.list.filter(item => {return item.type == 1;});
}

onReady代码

this.videoContext = uni.createVideoContext('myVideo');

methods 代码

change(e) {if (e.detail.current != 0) {this.list[0].isPlay = false;that.autoplay = false;if(this.list[0].type==2)that.videoContext.pause();}
},
PlayVideo(item) {if (item.isPlay == false) {item.isPlay = true;that.videoContext.play();that.autoplay = true;} else {item.isPlay = false;that.autoplay = false;that.videoContext.pause();}
},
suspend(i) {if (that.autoplay == true) {that.autoplay = false;}
}

css代码根据自己的方式调

.screen-swiper {min-height: 675upx;
}.screen-swiper {width: 750rpx;
}

欢迎点赞收藏

uniapp：轮播里如何加入视频相关推荐

抖音轮播图html代码,抖音上超火的“图片轮播”、“卡点”视频都是怎么做的？...
原标题:抖音上超火的"图片轮播"."卡点"视频都是怎么做的? 话不多说,直接进入正题. 首先,图片轮播类的视频该怎么做? 抖音视频剪辑江苏麒麟互娱步骤一:选 ...
轮播swiper中加视频video滑动不顺畅报错 property on ‘HTMLMediaElement‘: The provided double value is non-finite.
轮播swiper中加视频video滑动不顺畅报错TypeError: Failed to set the 'currentTime' property on 'HTMLMediaElement': T ...
uni-app 轮播图视频+图片视频图片全屏预览两种方法
项目场景: 在做商城项目的时候,商品详情的轮播图需要同时显示视频和图片,并且能够全局预览解决方案: 如果项目里有uview这个组件库,可以通过swiper轮播图的指定类型进行解决,点击这里进行跳转 ...
如何调整uniapp轮播图swiper的样式（dot的样式和位置）
背景官网文档不解释很多,这里我来详细说明下,很简单可以做到任意修改自己想要的效果. 需求我们需要做一个轮播图,其他没什么但是dot的位置要偏上一些,而且样式有要求. 实现利用uniapp官网的d ...
Android 视频图片轮播,详解android 视频图片混合轮播实现
循环添加视频view 图片view for (int i = 0 ;i if (beansarraylist.get(i).gettype()==1){ videoplayer = new nice ...
uniapp——轮播图（官方）、卡片轮播图
一.轮播图(官方) 代码: <template><view class="content"><!-- <cu-custom bgColor=&q ...
uniapp轮播组件之自动轮播
文章目录[隐藏] 前言实现代码最终效果(可惜只有静态图) 前言这两天实践了下 Uniapp 的轮播组件,官方提供了两种轮播组件: 一种是基础轮播组件:另一种是一个复杂的轮播组件. 但是在引用复杂 ...
uniapp轮播图（swiper）
属性名类型默认值说明平台差异说明 indicator-dots Boolean false 是否显示面板指示点 indicator-color Color rgba(0, 0, 0, .3) ...
使用vant+video.js实现轮播图图片和视频轮播播放
先上效果图 1. 安装 npm install video.js 2. 在需要用到的页面引入 import Video from "video.js";import "v ...
uni-app轮播图实现之swiper
首先在data中定义一个图片数据的对象数组 data() {return {rotation: [{id: 1,url: 'https://imgcps.jd.com/ling4/1000359273 ...

uniapp：轮播里如何加入视频

template代码

script内代码

欢迎点赞收藏

uniapp：轮播里如何加入视频相关推荐

最新文章

热门文章