<template>
	<view class="list">
		<tab></tab>
		<div class="listitem" @click="getplay(item)" v-for="(item,index) in list" :key="index">
			<image src="../../static/remote/d08413ec83b8ff61e5053903bb9d381b.png" mode="widthFix"></image>
			<div class="info">
				<div class="title">{{item.title}}</div>
				<div class="desc">{{item.desc}}</div>
			</div>
			<div class="time">上午08:00</div>
			<div class="msg">
				<div class="msg2">2</div>
			</div>
		</div>
		<u-popup :show="show" @close="gethide" bgColor="transparent" mode="center" :closeable="true">
			<div class="video">
				<video class="myVideo" :autoplay="true" id="myVideo" :src="video" enable-danmu danmu-btn
					controls></video>
			</div>
		</u-popup>
	</view>
</template>

<script>
	import tab from '../../components/tab.vue'
	import video1 from '@/static/video/video1.mp4'
	import video2 from '@/static/video/video2.mp4'
	export default {
		components: {
			tab
		},
		data() {
			return {
				video: '',
				show: false,
				list: [{
					title: '标题',
					desc: '标题描述',
					url: video1
				}]
			}
		},
		onShow() {

		},
		methods: {
			chooseImage() {

			},
			getplay(item) {
				if (item.url) {
					this.video = item.url
					this.show = true
				}
			},
			gethide() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		width: 750rpx;

		.listitem {
			width: 690rpx;
			margin: 10rpx auto;
			background: #F7F7F7;
			height: 140rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			position: relative;

			image {
				width: 100rpx;
				margin-left: 20rpx;
				margin-right: 20rpx;
			}

			.title {
				color: #1C1700;
				margin-bottom: 10rpx;
			}

			.desc {
				color: #818181;
				font-size: 26rpx;
			}

			.time {
				color: #CCD1D8;
				font-size: 24rpx;
				position: absolute;
				right: 120rpx;
				top: 30rpx;
			}
		}
	}

	.msg {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		position: absolute;
		right: 30rpx;

		.msg2 {
			background: #FF0000;
			width: 40rpx;
			height: 40rpx;
			color: #fff;
			font-size: 24rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
		}
	}

	.video {
		width: 700rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		padding-top: 100rpx;
		padding-bottom: 30rpx;

		.myVideo {
			width: 660rpx;
		}
	}
</style>

使用注意

打包的时候，需要勾选VideoPlayer否则打包后无法播放视频。