uniapp小程序一个页面多个视频播放

浅浅的花香味﹌ 2022-12-19 08:35 385阅读 0赞

<template>
    	<view class="">
    
    		
    		<view class="hot_video">
    		
    			
    			<view class="videoBox">
    				<view class="video_info" v-for="(item, index) in hot_video" :key="index">
    					
    					<view v-if="item.isShowImage" class="video_img">
    						<image class="fm" :src="item.image" mode=""></image>
    						
    						
    						<view class="yinYing2">
    							<view class="touXiang">
    								<image class="tx_img" :src="item.user_avatar" mode=""></image>
    								{ {  item.user_nickname }}
    							</view>
    						</view>
    						<view class="anNiuBox">
    							<image @tap="boFang($event,item)" :data-id="item.id" class="anNiu" :src="appInde+'/index/play.png'" mode=""></image>
    						</view>
    						<image class="user_avatar" :src="item.user_avatar" mode=""></image>
    					</view>
    					
    					<view v-else class="video_video">
    						<video @pause="pauseVideo" @play='playVideo' :id='`t${item.id}`' :show-fullscreen-btn="false" 
    						:data-id="item.id" :src="item.vediofile" controls></video>
    					</view>
    					<view class="title">{ {  item.title }}</view>
    				</view>
    			</view>
    		</view>
    		
    	</view>
    </template>
    
    <script>
    
    export default { 
    	data() { 
    		return { 
    			isVideo: 1, //判断到底显示视频还是图片
    			appInde: getApp().globalData.peiImg,
    			newPerson: false,
    			hot_video: [], //热门视频
    		};
    	},
    	
    	onShow() 
    
    		// 热门视频
    		let urlB = '/api/place/placeVedioList';
    		let dataB = { 
    			is_hot: 1,
    			cityname: this.city
    		};
    		this.$request.post(urlB, dataB).then(res => { 
    			res.data.forEach(item=>{ 
    				item.isShowImage=true;
    			})
    			this.hot_video = res.data.slice(0, 4); //只显示前4个
    			//console.log('热门视频', this.hot_video);
    		});
    
    		
    	},
    	methods: { 
    		
    		
    		/* 视频暂停 */
    		pauseVideo() { 
    			//console.log('点击了暂停');
    			//this.isVideo=2
    		},
    		/* 视频播放 */
    		playVideo(e) { 
    			let currentId= e.target.dataset.id
    			this.hot_video.forEach(item=>{ 
    				 let temp = item.id
    				 if(temp!==currentId){ 
    					 uni.createVideoContext('t' + temp).pause();
    				 } 
    			})
    		},
    		/* 点击图片的播放按钮 */
    		boFang(e,item) { 
    			let currentId= e.target.dataset.id
    			item.isShowImage=false;
    			this.hot_video.forEach(item=>{ 
    				 let temp = item.id
    				 if(temp!==currentId){ 
    					 uni.createVideoContext('t' + temp).pause();
    				 } 
    			})
    			uni.createVideoContext('t' + currentId).play();
    		},				
    		
    	
    	
    	
    	}
    };
    </script>
    <style lang="scss">
    	.yinYing2{ 
    		width: 100%;
    		position: absolute;
    		height:80upx;
    		background-image:url(../../static/yinYing.png);
    		background-size: 100% 100%;
    		z-index: 444;
    		transform: rotate(180deg);
    		bottom:0;
    		display: flex;
    		align-items: center;
    		/* 头像昵称 */
    		.touXiang { 
    			height: 45upx;
    			display: flex;
    			z-index: 666;
    			color: #FFFFFF;
    			font-size: 28upx;
    			transform: rotate(180deg);
    			width: 320rpx;
    			image { 
    				width: 41upx;
    				height: 41upx;
    				border-radius: 50%;
    				margin-right: 10upx;
    			}
    		}
    		
    	}
    
    
    
    
    // 热门视频
    .hot_video { 
    	width: 95vw;
    	margin: 0 auto;
    	.videoBox { 
    		width: 100%;
    		min-height: 600rpx;
    		display: flex;
    		flex-wrap: wrap;
    		justify-content:space-around;
    		.video_info { 
    			width: 345upx;
    			height: 500upx;
    			// margin-top: 30upx;
    			/* 视频 */
    			.video_video { 
    				width: 345upx;
    				height: 400upx;
    				border-radius: 15upx;
    				video { 
    					width: 345upx;
    					height: 400upx;
    					border-radius: 15upx;
    				}
    			}
    			/* 视频图片 */
    			.video_img { 
    				width: 345upx;
    				height: 400upx;
    				position: relative;
    				border-radius: 15upx;
    				overflow: hidden;
    				box-shadow: 0 0 10upx #ccc;
    				position: relative;
    				overflow: hidden;
    				.fm { 
    					width: 100%;
    					position: absolute;
    					 top: 50%;
    					 left: 50%;
    					 transform: translate(-50%, -50%); 
    				}
    				.anNiuBox { 
    					position: absolute;
    					z-index: 666;
    					margin: auto;
    					top: 0;
    					bottom: 0;
    					left: 0;
    					right: 0;
    					width: 90upx;
    					height: 90upx;
    					display: flex;
    					flex-direction: column;
    					justify-content: space-between;
    					align-items: center;
    					.anNiu { 
    						width: 80upx;
    						height: 80upx;
    						border-radius: 50%;
    					}
    				}
    				.yanBox { 
    					position: absolute;
    					z-index: 666;
    					top: 25upx;
    					display: flex;
    					align-items: center;
    					font-size: 26upx;
    					.yan { 
    						width:24upx;
    						height:20upx;
    						margin-right: 10upx;
    						margin-left: 10rpx;
    					}
    				}
    				.user_avatar { 
    					width: 41upx;
    					height: 41upx;
    					border-radius: 50%;
    					position: absolute;
    					left: 15upx;
    					bottom: 15upx;
    					z-index: 666;
    				}
    			}
    			.title { 
    				olor: #333333;
    				    width: 330rpx;
    				    height: 55rpx;
    				    margin-top: 15rpx;
    				    font-size: 30rpx;
    			}
    		}
    	}
    }
    </style>