uniAPP 视频图片预览组件

效果图

 

思路：处理文件列表，根据文件类型归类

已兼容 H5  ios 设备，测试已通过 浙政钉，微信小程序
视频资源因为，没有预览图，用灰色图层加播放按钮代替

<template><!--视频图片预览组件 --><view v-if="list.length"><view class="back-medio"><view v-if="imgList.length" class="img-box" v-for="(item,index) in imgList" :key="index"><img :src="item.filepath" class="step-img" @click="viweImage(item.filepath)" /><view class="img-num" v-if="index == '0'">{{ list.length }}张</view></view><view v-if="videoList.length" v-for="(item,id) in videoList" :key="id+'d'" class="img-box"@click="playvideo(item)"><view class="step-img vide-back"><img :src="playIcon" class="playIcon" /></view></view></view></view><!-- 视频预览 兼容H5--><uni-popup ref="videoShow" :mask-click="false">
<view class="viewVideo"><!-- 兼容H5 --><view class="close" @click="fullscreenchange"></view><video id="myVideo" :src="cVideo" object-fit='contain' autoplay="false" :controls="true"
show-fullscreen-btn="false" play-btn-position="center" show-loading='true'@fullscreenchange="fullscreenchange"></video></view></uni-popup></view>
</template>
<script>export default {props: {list: {type: [Array,Object],default:[],// 示例数据// {//     "createTime": "2023-07-04 02:34:15",//     "modifyTime": "2023-07-04 02:34:15",//     "id": 4086,//     "filepath": "https://wsgz.deqing.gov.cn/images/4/20230704103415Dingtalk_20230526111858.jpg",//     "filename": "20230704103415Dingtalk_2023052// }
},},created() {this.init('1')},watch: {list() {this.init('1')console.log("ls",this.list)}},
data() {return {videoList: [], //媒体文件列表imgList: [], //媒体文件列表cVideo: '', //当前播放视频// 图标playIcon: 替换成播放图标bese64代码,
}},methods: {// 关闭视频弹窗close() {this.$refs.videoShow.close()},
// 点击视频封面预览视频playvideo(item) {console.log("播放", item)this.cVideo = item.filepaththis.$refs.videoShow.open('top')this.videoContext = uni.createVideoContext('myVideo', this);// this.videoContext.requestFullScreen({// 	direction: 0// });this.videoContext.play()},// 视频0 满屏点击关闭fullscreenchange() {this.cVideo = ''this.videoContext.pause()this.close()},// 预览图片单张viweImage(e) {console.log(" 预览图片单张", e)uni.previewImage({current: 0,urls: [e]});},// 预览图片单张viweImage(e) {console.log(" 预览图片单张", e)uni.previewImage({current: 0,urls: [e]});},
init(bu) {console.log("dfsfsfss", bu, this.list,this.list.constructor)let th = thislet arr =th.listth.videoList = []th.imgList = []arr.length && arr.forEach((item) => {// if (item.imgPath) {let type = item.fileExtNameif (type == "mp4" || type == "rmvb" || type == "avi" || type == "ts") {th.videoList.push(item)} else {th.imgList.push(item)}
})// console.log("处理：", this.videoList, this.imgList)}}
}
</script><style lang="scss">.dynamic-img {margin-top: 20rpx;display: flex;flex-wrap: wrap;height: 120rpx;overflow: hidden;
image {height: 120rpx;width: 120rpx;margin-right: 16rpx;}.video-box {height: 120rpx;width: 120rpx;margin-right: 16rpx;position: relative;.triangle {
display: inline-block;font-size: 0;overflow: hidden;z-index: 2;top: 50rpx;right: 50rpx;}.triangle:before {content: "";position: relative;display: inline-block;border: 25rpx solid transparent;}
.triangle-right {position: absolute;right: 35rpx;top: 36rpx;border-top-right-radius: 50%;border-bottom-right-radius: 50%;}.triangle-right:before {left: 2px;border-right-width: 0;border-left-width: 50rpx;border-left-color: rgb(181, 181, 181);}.black {z-index: 1;position: absolute;top: 0;left: 0;height: 120rpx;width: 120rpx;background: #000000;opacity: 0.4;}
.video {position: absolute;top: 0;}}}.viewVideo {width: 100vw;min-height: 100vh;display: -webkit-box;display: -webkit-flex;display: flex;align-items: flex-start;justify-content: center;background: #000000;flex-wrap: wrap;
.close {width: 80rpx;height: 80rpx;z-index: 99999;position: relative;margin: 0 auto;top: 60rpx;}.close:before,
.close:after {position: absolute;left: 40rpx;content: ' ';height: 80rpx;width: 8rpx;background-color: #EFEFF4;}.close:before {transform: rotate(45deg);}.close:after {transform: rotate(-45deg);}}
#myVideo {width: 100vw;height: 80vh;margin: 20px 0;}.back-medio {display: flex;flex-wrap: wrap;height: 48.4px;overflow: hidden;.vide-back {background: #3a3939c4;}
.img-box {position: relative;width: 62.23px;height: 48.4px;margin-right: 8px;margin-bottom: 8px;overflow: hidden;.step-img {width: 62.23px;height: 48.4px;border-radius: 4px;}
.playIcon {width: 30px;height: 30px;margin: 9px 16px;}.img-num {position: absolute;top: 0;right: 0;height: 32rpx;line-height: 32rpx;padding: 0 10rpx;font-size: 20rpx;z-index: 8;color: #ffffff;background: rgba(0, 20, 54, 0.6);border-radius: 0px 20rpx;}}}
.video-box {width: 62.23px;height: 48.4px;.video::-webkit-media-controls {display: none !important}}
</style>