示例代码：

 

 

a、视频列表页video.vue

<template>
	<view>
		<scroll-view scroll-y class="scroll-pt">
			<view class="list-pt">
				<view class="item-pr" v-for="(item, index) in videoList" :key="index">
					<view class="top-pr">
						<view class="tlt-pr">{{item.title}}</view>
						<view class="share-pr">
							<image class="img-pr" src="../../../../static/images/share.png"></image>
						</view>
					</view>
					<view class="bot-pr">
						<video v-if="item.showVideo" class="video-pr" id="myVideo" :src="item.src" @error="videoErrorCallback" controls show-loading autoplay :poster="item.prc"></video>
						<view v-else class="video-pr flex-cnt bg-pt" :style="[{'background-image':'url('+item.prc+')'}]" @click="playVideo(index, item)">
							<image class="play-pr" src="../../../../static/images/ic_play.png"></image>
						</view>
					</view>
				</view>
				<!--列表为空-->
				<view class="empty-pt" v-if="false">
					<image class="img-pt" src="../../../../static/images/empty.png"></image>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoList:[{
					showVideo: false,
					title: '空操作面板使用指南',
					prc: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b1476d40-4e5f-11eb-b997-9918a5dda011.png',
					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@20181126-lite.m4v',
				},
				{
					showVideo: false,
					title: '机作面板使用指南',
					prc: 'http://sjbz.fd.zol-img.com.cn/t_s1080x1920c/g3/M02/0E/0D/ChMlV17oT-6IZ0ZcACCEJ-b0kqYAAU0mQJzD-4AIIQ_684.jpg',
					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@20181126-lite.m4v',
				},
				{
					showVideo: false,
					title: '机操作面板使用指南',
					prc: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b1476d40-4e5f-11eb-b997-9918a5dda011.png',
					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@20181126-lite.m4v',
				},
				{
					showVideo: false,
					title: '操作面板使用指南',
					prc: 'http://sjbz.fd.zol-img.com.cn/t_s1080x1920c/g3/M02/0E/0D/ChMlV17oT-6IZ0ZcACCEJ-b0kqYAAU0mQJzD-4AIIQ_684.jpg',
					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@20181126-lite.m4v',
				},
				{
					showVideo: false,
					title: '作面板使用指南',
					prc: 'http://sjbz.fd.zol-img.com.cn/t_s1080x1920c/g3/M02/0E/0D/ChMlV17oT-6IZ0ZcACCEJ-b0kqYAAU0mQJzD-4AIIQ_684.jpg',
					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@20181126-lite.m4v',
				},
				{
					showVideo: false,
					title: '面板使用指南',
					prc: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b1476d40-4e5f-11eb-b997-9918a5dda011.png',
					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@20181126-lite.m4v',
				},
				{
					showVideo: false,
					title: '面板使用指南',
					prc: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b1476d40-4e5f-11eb-b997-9918a5dda011.png',
					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@20181126-lite.m4v',
				}]
			}
		},
		mounted() {
			
		},
		methods: {
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			
			//播放视频
			playVideo(index, item){
				//开始播放，本页面内播放
				// for (var i = 0; i < this.videoList.length; i++) {
				// 	this.videoList[i].showVideo = false;
				// }
				// this.videoList[index].showVideo = true;
				//其他页面播放
				uni.navigateTo({
					url: '/pages/my/knowledge/video/play/play?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
		}
	}
</script>

<style lang="scss">
.scroll-pt{
	height: calc(100vh - var(--status-bar-height) - 45px - 45px);
}

.empty-pt{
	padding: 80rpx;
	text-align: center;
	.img-pt{
		width: 300rpx;
		height: 200rpx;
	}
}

.item-pr{
	padding: 20rpx;
	margin-bottom: 10rpx;
	border-radius: 15rpx;
	background-color: #FFFFFF;
	.top-pr{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		.tlt-pr{
			font-size: 28rpx;
			font-weight: bold;
		}
		.share-pr{
			.img-pr{
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
	.bot-pr{
		.video-pr{
			width: 710rpx;
			height: 400rpx;
		}
		
		.bg-pt{
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
		
		.flex-cnt{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.play-pr{
			width: 100rpx;
			height: 100rpx;
		}
	}
}
</style>

b、视频播放页play.vue

<template>
	<view>
		<!--导航栏-->
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="content">{{videoItem.title}}</block>
			<block slot="right">
				<text class="margin-right text-df"></text>
			</block>
		</cu-custom>
		<!--视频区域-->
		<view v-if="showVideo" class="vid-pr flex-cnt bg-pt" :style="[{'background-image':'url('+pictureSrc+')'}]">
			<video class="video-pr" id="myVideo" :src="videoSource" @error="videoErrorCallback" controls show-loading autoplay objectFit="fill" :poster="pictureSrc"></video>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoItem: null,
				showVideo: false,
				videoSource: '',
				pictureSrc: '',
			}
		},
		onLoad(option) {
			//接收传递的参数
			this.videoItem = JSON.parse(decodeURIComponent(option.item));
		},
		onReady() {
			setTimeout(()=>{
				if(this.videoItem){
					this.showVideo = true;
					this.videoSource = encodeURI(this.videoItem.src);
					this.pictureSrc = encodeURI(this.videoItem.prc);
				}
			}, 1500)
		},
		methods: {
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
		}
	}
</script>

<style lang="scss">
.vid-pr{
	width: 100vw;
	height: calc(100vh - var(--status-bar-height) - 45px - 5px);
}

.bg-pt{
	background-size: 100% 100%;
	background-repeat: no-repeat;
	//CSS滤镜
	filter: blur(8px);
}

.flex-cnt{
	display: flex;
	justify-content: center;
	align-items: center;
}

.video-pr{
	width: 100%;
}
</style>

完！！！

# uni-app
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue