uniapp制作一个视频播放页面
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上的问题，欢迎评论区留言。