zhihuixiaoyuan2-ui/components/home/luvideo.vue

<template>
  <view class="hvideo bgf">
	  <view class="hvlist" v-for="(ite,idx) in videoList" :key="idx">
			 <view class="hvlistl">
				 <view :class="ite.txt==1?'cir1 cir':'cir2 cir'"></view>
				 <view class="tit mb6">{{ite.tit}}</view>
				 <view class="txt">当前路况<text :class="ite.txt==1?'co5c':'coeb'">{{ite.txt==1?'畅通':'拥堵'}}</text></view>
			 </view>
			 
			 <video class="hvlistr" :id="`video${idx}`" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4" :controls='controls'   @play='videoPlay(idx)'>
			 </video>
			 <!-- controls -->
			<!-- <video id="myVideo" class="hvlistr" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
			                   @fullscreenchange="fullscreenchange" @play='videoPlay(idx)'  controls></video> -->
	  </view>
	  <!--  -->
	 <view class="hmore">
	 	查看更多
	 	<image :src="moreimg"></image>
	 </view>
	
  </view>
</template>

<script>
	// import tabSearch from "@/components/toptab/search.vue"
  export default {
	data(){
		return{
			src: '',
			videoList:[{tit:'黄山路与潜山路交口路况',txt:'1'},{tit:'黄山路与潜山路交口路况',txt:'2'}],
			moreimg:require('@/static/images/hmore.png'),
			playIdx:'',
			controls:true,
			videoContext:''
		}
	},
	methods:{
		videoPlay(idx) {
            if (this.playIdx !== '') {
                console.log(`暂停上一个下标为${this.playIdx}的视频`);
                let videoContext  = uni.createVideoContext(`video${this.playIdx}`)
                videoContext .pause()
            }
            
            this.playIdx = idx
        },
			fullscreenchange (e){
				if(!e.detail.fullScreen){
					this.videoContext.stop()
				}
			}
	},
	
	onLoad: function() {
    }
  }
</script>

<style lang="scss" scoped>
.hvideo{margin: 0rpx 36rpx;padding: 28rpx 24rpx;box-sizing: border-box;
	.hvlist{margin-bottom: 28rpx;min-height: 146rpx;background: #F3F3FD;
border-radius: 14rpx;padding: 11rpx;box-sizing: border-box;display: flex;align-items: center;
	&:last-child{margin-bottom: 0;}
}
	.hvlistl{flex: 1;position: relative;padding-left: 40rpx;
		.tit{font-size: 30rpx;font-weight: bold;
color: #161616;}
		.txt{font-size: 28rpx;color: #666666;}
		.cir{width: 12rpx;height: 12rpx;border-radius: 50%;position: absolute;left: 12rpx;top:14rpx ;
			&.cir1{background-color: #5CC37D;}
			&.cir2{background-color: #EB5663;}
		}
	}
	.hvlistr{width: 217rpx;height: 125rpx;border-radius: 14rpx;flex: 0 0 auto;flex: 0 0 auto;}

}
.hmore{font-size: 30rpx;font-weight: 500;text-align: center;
color: #AAAAAA;
		image{width: 26rpx;height: 22rpx;margin: 12rpx auto 0;}
	}
</style>