网站运营与管理实验报告,个人做搜索引擎网站违法吗,3000部末年禁止无需下载,网推广公司效果图 思路#xff1a;处理文件列表#xff0c;根据文件类型归类
已兼容 H5 ios 设备#xff0c;测试已通过 浙政钉#xff0c;微信小程序 视频资源因为#xff0c;没有预览图#xff0c;用灰色图层加播放按钮代替
template!--视频图片预览组件 --处理文件列表根据文件类型归类
已兼容 H5 ios 设备测试已通过 浙政钉微信小程序 视频资源因为没有预览图用灰色图层加播放按钮代替
template!--视频图片预览组件 --view v-iflist.lengthview classback-medioview v-ifimgList.length classimg-box v-for(item,index) in imgList :keyindeximg :srcitem.filepath classstep-img clickviweImage(item.filepath) /view classimg-num v-ifindex 0{{ list.length }}张/view/viewview v-ifvideoList.length v-for(item,id) in videoList :keyidd classimg-boxclickplayvideo(item)view classstep-img vide-backimg :srcplayIcon classplayIcon //view/view/view/view!-- 视频预览 兼容H5--uni-popup refvideoShow :mask-clickfalse
view classviewVideo!-- 兼容H5 --view classclose clickfullscreenchange/viewvideo idmyVideo :srccVideo object-fitcontain autoplayfalse :controlstrue
show-fullscreen-btnfalse play-btn-positioncenter show-loadingtruefullscreenchangefullscreenchange/video/view/uni-popup/view
/template
scriptexport 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)}}
}
/scriptstyle langscss.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
