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上的问题，欢迎评论区留言。

相关推荐
codingWhat11 小时前
小程序里「嵌」H5：一套完整可落地的 WebView 集成方案
前端·uni-app·webview
小时前端2 天前
微信小程序选不了本地文件？用 web-view + H5 一招搞定
前端·微信小程序·uni-app
Mr_li2 天前
给 Vue 开发者的 uni-app 快速指南
vue.js·uni-app
anyup2 天前
🔥2026最推荐的跨平台方案：H5/小程序/App/鸿蒙，一套代码搞定
前端·uni-app·harmonyos
Mintopia3 天前
Vue3 项目如何迁移到 uni-app x：从纯 Web 到多端应用的系统指南
uni-app
Mintopia3 天前
uni-app x 发展前景技术分析：跨端统一的新阶段？
uni-app
不爱说话郭德纲4 天前
告别漫长的HbuilderX云打包排队！uni-app x 安卓本地打包保姆级教程（附白屏、包体积过大排坑指南）
android·前端·uni-app
HashTang5 天前
【AI 编程实战】第 12 篇：从 0 到 1 的回顾 - 项目总结与 AI 协作心得
前端·uni-app·ai编程
JunjunZ6 天前
uniapp 文件预览：从文件流到多格式预览的完整实现
前端·uni-app
郑州光合科技余经理6 天前
代码展示：PHP搭建海外版外卖系统源码解析
java·开发语言·前端·后端·系统架构·uni-app·php
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03OpenClaw + 飞书（Feishu）环境搭建指南04Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services05OpenClaw优化飞书API 额度已耗尽问题06Window 10部署openclaw报错node.exe : npm error code 12807小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）08Clawdbot部署教程：解决‘gateway token missing’授权问题的完整步骤09本地部署 OpenClaw + DeepSeek-R1 完全指南10网站改了域名，如何查找？