效果图
思路：处理文件列表，根据文件类型归类文章来源：https://www.toymoban.com/news/detail-615163.html
已兼容 H5 ios 设备，测试已通过 浙政钉，微信小程序
视频资源因为，没有预览图，用灰色图层加播放按钮代替文章来源地址https://www.toymoban.com/news/detail-615163.html
<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.filepath
this.$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 = this
let arr =th.list
th.videoList = []
th.imgList = []
arr.length && arr.forEach((item) => {
// if (item.imgPath) {
let type = item.fileExtName
if (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>到了这里，关于uniAPP 视频图片预览组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
