uniapp制作一个视频播放页面

小阿技术2025-07-12 18:56

1.产品展示

2.页面功能

(1)点击上方按钮实现页面跳转；

(2)点击相关视频实现视频播放。

3.uniapp代码

复制代码 
<template>
	<view class="container">
		<!-- 顶部分类文字 -->
		<view class="categories">
			<navigator class="category-item" url="/pageB/综合/电视剧">电视剧</navigator>
			<navigator class="category-item" url="/pageB/综合/电影">电影</navigator>
			<navigator class="category-item" url="/pageB/综合/音乐">音乐</navigator>
			<navigator class="category-item" url="/pageB/综合/短视频">短视频</navigator>
		</view>

		<!-- 大盒子 -->
		<view class="big-box">
			<view class="big-box" @click="navigateToMusic1">
				<image class="big-box-image" src="../../static/视频/彝海结盟.png" mode="aspectFill"></image>
				<text class="big-box-title">热门推荐</text>
			</view>
		</view>

		<!-- 小盒子区域 -->
		<view class="small-boxes">
			<view class="small-box-column">
				<view class="small-box" @click="navigateToMusic2">
					<image class="small-box-image"
						src="http://file.yizu.tv/cms/2023-07-11/4212271/F89DCE78A1A7225FBE82A550FB088697.png?w=250&h=148&s=3 "
						mode="aspectFill"></image>
					<text class="small-box-title">冲天火</text>
				</view>
				<view class="small-box" @click="navigateToMusic3">
					<image class="small-box-image"
						src="http://file.yizu.tv/cms/2023-07-12/4230948/63430DE81E1A6D38ED2C6BC3512B74E2.png?w=250&h=148&s=3  "
						mode="aspectFill"></image>
					<text class="small-box-title">西行记</text>
				</view>
				<view class="small-box" @click="navigateToMusic6">
					<image class="small-box-image"
						src="http://file.yizu.tv/cms/2023-07-10/4212094/8434B1E2151BF086F8D134C8B2DA7071.jpeg?w=250&h=148&s=3"
						mode="aspectFill"></image>
					<text class="small-box-title">沉默的证人</text>
				</view>
				<view class="small-box" @click="navigateToMusic8">
					<image class="small-box-image"
						src="http://file.yizu.tv/cms/2023-07-10/4211381/6B01EA1907E0114EFD1DE44BF4C7AB90.jpg?w=250&h=148&s=3"
						mode="aspectFill"></image>
					<text class="small-box-title">不二神探</text>
				</view>
			</view>
			
			
			<view class="small-box-column">
				<view class="small-box" @click="navigateToMusic4">
					<image class="small-box-image"
						src="http://file.yizu.tv/cms/2021-02-27/153081/A0F29740FB262684AA080A4E0832CEB0.png?w=250&h=148&s=3 "
						mode="aspectFill"></image>
					<text class="small-box-title">索玛花开</text>
				</view>
				<view class="small-box" @click="navigateToMusic5">
					<image class="small-box-image"
						src="http://file.yizu.tv/cms/2023-07-10/4211342/30571EFD1EE5D14AA20051EFDA0AD7CD.png?w=250&h=148&s=3"
						mode="aspectFill"></image>
					<text class="small-box-title">荒岛余生</text>
				</view>
				<view class="small-box" @click="navigateToMusic7">
					<image class="small-box-image"
						src="https://tse4-mm.cn.bing.net/th/id/OIP-C.N7gn-q2Huzn-GY4lWL-Y6gHaFb?w=213&h=182&c=7&r=0&o=5&dpr=1.6&pid=1.7"
						mode="aspectFill"></image>
					<text class="small-box-title">两个笨贼</text>
				</view>
				<view class="small-box" @click="navigateToMusic9">
					<image class="small-box-image"
						src="https://image11.m1905.cn/uploadfile/2016/0526/20160526013603726494.jpg"
						mode="aspectFill"></image>
					<text class="small-box-title">支格阿鲁</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			handleCategoryClick(category) {
				console.log('点击了分类：', category);
				// 这里可以添加跳转到对应分类页面的逻辑  
			},
			handleBoxClick(boxName) {
				console.log('点击了小盒子：', boxName);
				// 这里可以添加点击小盒子后的处理逻辑，比如显示详情等  
			},
			navigateToMusic1() {
				uni.navigateTo({
					url: '/pageA/TV/彝海结盟'
				})
			},
			navigateToMusic2() {
				uni.navigateTo({
					url: '/pageA/TV/冲天火'
				})
			},
			navigateToMusic3() {
				uni.navigateTo({
					url: '/pageA/TV/西行记'
				})
			},
			navigateToMusic4() {
				uni.navigateTo({
					url: '/pageA/TV/索玛花开'
				})
			},
			navigateToMusic5() {
				uni.navigateTo({
					url: '/pageA/TV/荒岛求生'
				})
			},
			navigateToMusic6() {
				uni.navigateTo({
					url: '/pageA/TV/沉默的证人'
				})
			},
			navigateToMusic7() {
				uni.navigateTo({
					url: '/pageA/TV/两个笨贼'
				})
			},
			navigateToMusic8() {
				uni.navigateTo({
					url: '/pageA/TV/不二神探'
				})
			},
			navigateToMusic9() {
				uni.navigateTo({
					url: '/pageA/TV/支格阿鲁'
				})
			}
		}
	}
</script>

<style>
	/* 通用样式 */
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10px;
		width: 100%;
		box-sizing: border-box;
	}

	/* 分类样式 */
	.categories {
		display: flex;
		justify-content: space-around;
		width: 100%;
		max-width: 600px;
		/* 可根据需要调整 */
		margin-bottom: 20px;
	}

	.category-item {
		padding: 10px 20px;
		border: 1px solid #55aaff;
		border-radius: 0px;
		cursor: pointer;
		text-align: center;
		background-color: #f4f4f4;
		transition: background-color 0.3s ease;
	}

	.category-item:hover,
	.category-item:active {
		background-color: #f4f4f4;
	}

	.big-box {
		position: relative;
		width: 100%;
		max-width: 360px;
		/* 将最大宽度增加到450px */
		aspect-ratio: 16 / 9;
		/* 保持宽高比 */
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		margin-bottom: 15px;
		/* 与其他元素之间的空格 */
	}

	.big-box-image {
		width: 100%;
		/* height: 100%; */
		object-fit: cover;
	}

	.big-box-title {
		position: absolute;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		color: #fff;
		background-color: rgba(0, 0, 0, 0.5);
		padding: 5px 10px;
		border-radius: 5px;
		font-size: 18px;
		font-weight: bold;
	}

	/* 小盒子区域样式 */
	.small-boxes {
		display: flex;
		flex-wrap: wrap;
		/* 允许换行，但在这个例子中我们尽量不让它换行 */
		justify-content: space-between;
		/* 使用space-between而不是space-around，以在两端提供更大的空间（如果需要的话） */
		width: 100%;
		max-width: 600px;
		/* 可根据需要调整，确保两个列可以在单行内显示 */
		padding: 0 5px;
		/* 如果需要，在容器两侧添加一些内边距 */
	}

	.small-box-column {
		flex: 0 0 calc(50% - 10px);
		/* 使用calc来计算宽度，减去两边的margin */
		margin: 0 5px;
		/* 在列之间添加间距 */
		display: flex;
		flex-direction: column;
		gap: 7px;
		/* 列内小盒子之间的间距 */
	}

	/* 其他样式保持不变 */

	.small-box {
		position: relative;
		width: 100%;
		aspect-ratio: 16 / 9;
		/* 可根据需要调整宽高比 */
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		cursor: pointer;
	}

	.small-box-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.small-box-title {
		position: absolute;
		bottom: 10px;
		left: 10px;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.5);
		padding: 2px 5px;
		border-radius: 4px;
		font-size: 14px;
	}
</style>

3.注意事项

(1)需要根据自己的需求替换URL、图片等；

(2)这里只给出项目的一部分代码，功能可能受到限制，后续会上传其他代码；

(3)如果有什么uniapp上的问题，欢迎评论区留言。

相关推荐
shmily ....3 小时前
医疗预约系统中的录音与图片上传功能实现：Vue3+Uniapp 实战
uni-app
小阿技术4 小时前
uniapp制作一个个人页面
uni-app
小周同学:9 小时前
uni-app获取手机当前连接的WIFI名称
智能手机·uni-app
书山有路勤为径~12 小时前
【解决问题】HBuilderX窗口文字太小
uni-app
qq_424409191 天前
uniapp的app项目，某个页面长时间无操作，返回首页
前端·vue.js·uni-app
2501_915918411 天前
Fiddler中文版全面评测：功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
不知名It水手1 天前
uniapp运行项目到ios基座
ios·uni-app·cocoa
hunzi_11 天前
搭建商城系统
java·uni-app·php
合作小小程序员小小店1 天前
web网页，在线%食谱推荐系统%分析系统demo，基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app
热门推荐
01【无标题】02集群聊天服务器---MySQL数据库的建立03Coze扣子平台完整体验和实践（附国内和国际版对比）04Java类变量（静态变量）05KGG转MP3工具|非KGM文件|解密音频06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07使用Ruby接入实时行情API教程08Java学习第十五部分——MyBatis09DeepSeek各版本说明与优缺点分析10绿色建筑新态势：楼宇自控助力能效提升，推动成本优化新路径