用uniapp写一个播放视频首页页面代码

效果如下图所示

首页有导航栏，搜索框，和视频列表，

导航栏如下图

搜索框如下图

视频列表如下图

文件目录

视频首页页面代码如下

<template>

<view class="video-home">



<view class="search-bar">

<input type="text" placeholder="搜索视频..." v-model="searchQuery" @input="handleSearch" />

<button @click="handleSearch">搜索</button>

</view>



<view class="category-tabs">

<scroll-view scroll-x class="tabs">

<view v-for="(category, index) in categories" :key="index"

:class="['tab-item', { 'active': activeCategory === category }]"

@click="changeCategory(category)">

{{ category }}

</view>

</scroll-view>

</view>



<view class="video-list">

<block v-for="(item, index) in filteredVideos" :key="index">

<view class="video-item" @click="goToVideoDetail(item.id)">

<video ref="videos" :src="item.videoUrl" class="video-thumbnail" controls></video>

<view class="video-content">

<text class="video-title">{{ item.title }}</text>

<text class="video-summary">{{ item.summary }}</text>

<text class="video-date">{{ formatDate(item.date) }}</text>

<text class="video-duration">{{ formatDuration(item.duration) }}</text>

</view>

</view>

</block>

</view>

</view>

</template>

<script>

export default {

data() {

return {

searchQuery: '',

activeCategory: '推荐',

categories: ['推荐', '热门', '最新', '科技', '娱乐', '生活'],

videoItems: [

// 示例视频条目，请替换为实际数据或从后端获取的数据

{ id: 1, title: '视频标题1', summary: '视频摘要...', date: new Date(), duration: 360, videoUrl: '/static/videos/1.mp4', category: '推荐' },

{ id: 2, title: '视频标题2', summary: '视频摘要...', date: new Date(), duration: 540, videoUrl: '/static/videos/2.mp4', category: '热门' },

{ id: 3, title: '视频标题3', summary: '视频摘要...', date: new Date(), duration: 360, videoUrl: '/static/videos/3.mp4', category: '推荐' },

{ id:4, title: '视频标题4', summary: '视频摘要...', date: new Date(), duration: 540, videoUrl: '/static/videos/4.mp4', category: '热门' },

{ id: 5, title: '视频标题5', summary: '视频摘要...', date: new Date(), duration: 360, videoUrl: '/static/videos/5.mp4', category: '推荐' },

{ id: 6, title: '视频标题6', summary: '视频摘要...', date: new Date(), duration: 540, videoUrl: '/static/videos/6.mp4', category: '热门' },

{ id:7, title: '视频标题7', summary: '视频摘要...', date: new Date(), duration: 360, videoUrl: '/static/videos/7.mp4', category: '推荐' },

{ id:8, title: '视频标题8', summary: '视频摘要...', date: new Date(), duration: 540, videoUrl: '/static/videos/8.mp4', category: '热门' },

{ id:9, title: '视频标题9', summary: '视频摘要...', date: new Date(), duration: 360, videoUrl: '/static/videos/live1.mp4', category: '推荐' },

{ id: 10, title: '视频标题10', summary: '视频摘要...', date: new Date(), duration: 540, videoUrl: '/static/videos/live2.mp4', category: '热门' },

{ id: 1, title: '视频标题1', summary: '视频摘要...', date: new Date(), duration: 360, videoUrl: '/static/videos/1.mp4', category: '推荐' },

{ id: 2, title: '视频标题2', summary: '视频摘要...', date: new Date(), duration: 540, videoUrl: '/static/videos/2.mp4', category: '热门' },

{ id: 3, title: '视频标题3', summary: '视频摘要...', date: new Date(), duration: 360, videoUrl: '/static/videos/3.mp4', category: '推荐' },

{ id:4, title: '视频标题4', summary: '视频摘要...', date: new Date(), duration: 540, videoUrl: '/static/videos/4.mp4', category: '热门' },

{ id: 5, title: '视频标题5', summary: '视频摘要...', date: new Date(), duration: 360, videoUrl: '/static/videos/5.mp4', category: '推荐' },

{ id: 6, title: '视频标题6', summary: '视频摘要...', date: new Date(), duration: 540, videoUrl: '/static/videos/6.mp4', category: '娱乐' },

{ id:7, title: '视频标题7', summary: '视频摘要...', date: new Date(), duration: 360, videoUrl: '/static/videos/7.mp4', category: '科技' },

{ id:8, title: '视频标题8', summary: '视频摘要...', date: new Date(), duration: 540, videoUrl: '/static/videos/8.mp4', category: '最新' },

{ id:9, title: '视频标题9', summary: '视频摘要...', date: new Date(), duration: 360, videoUrl: '/static/videos/live1.mp4', category: '推荐' },

{ id: 10, title: '视频标题10', summary: '视频摘要...', date: new Date(), duration: 540, videoUrl: '/static/videos/live2.mp4', category: '热门' },

],

currentPlaying: null // 用来追踪当前正在播放的视频元素

};

},

computed: {

filteredVideos() {

return this.videoItems.filter(item =>

(this.searchQuery ? item.title.includes(this.searchQuery) : true) &&

(this.activeCategory === '推荐' || item.category === this.activeCategory)

);

}

},

methods: {

goToVideoDetail(id) {

uni.navigateTo({

url: `/pages/VideoDetail/VideoDetail?id=${id}`

});

},

handleSearch(event) {

// 如果需要对输入进行实时响应，可以在这里实现

this.searchQuery = event.target.value;

},

changeCategory(category) {

this.activeCategory = category;

},

playVideo(videoUrl) {

const videos = this.$refs.videos || [];

videos.forEach(video => {

if (video.src === videoUrl && this.currentPlaying !== video) {

this.pauseCurrent();

video.play();

this.currentPlaying = video;

} else if (this.currentPlaying === video) {

video.pause();

this.currentPlaying = null;

}

});

},

pauseCurrent() {

if (this.currentPlaying) {

this.currentPlaying.pause();

}

},

formatDate(date) {

const options = { year: 'numeric', month: 'long', day: 'numeric' };

return new Intl.DateTimeFormat('zh-CN', options).format(date);

},

formatDuration(seconds) {

const minutes = Math.floor(seconds / 60);

const remainingSeconds = seconds % 60;

return ` ${minutes}:$ {remainingSeconds.toString().padStart(2, '0')}`;

}

}

};

</script>

<style scoped>

/* 样式 */

.video-home {

padding: 100px;

}

.search-bar {

display: flex;

align-items: center;

margin-bottom: 10px;

}

.search-bar input {

flex: 1;

padding: 8px;

border: 1px solid #ccc;

border-radius: 4px;

}

.search-bar button {

margin-left: 5px;

padding: 8px 16px;

}

.category-tabs {

margin-bottom: 10px;

}

.tabs {

white-space: nowrap;

}

.tab-item {

display: inline-block;

padding: 8px 16px;

cursor: pointer;

}

.tab-item.active {

color: #3cc51f;

font-weight: bold;

}

.video-list .video-item {

display: flex;

margin-bottom: 10px;

padding: 10px;

background-color: #fff;

border-radius: 4px;

}

.video-thumbnail {

width: 400px;

height: 400px;

margin-right: 10px;

border-radius: 4px;

}

/* 调整视频缩略图大小 */

.video-thumbnail {

width: 100%; /* 让缩略图占满整个视频容器 */

height: auto; /* 维持视频的原始比例 */

border-radius: 8px; /* 匹配视频项的圆角 */

margin-right: 20px; /* 增大右侧外边距，给文字内容留出更多空间 */

}

.video-content {

flex: 2;

}

.video-title {

font-size: 16px;

font-weight: bold;

margin-bottom: 5px;

}

.video-summary {

font-size: 14px;

color: #666;

}

.video-date,

.video-duration {

font-size: 12px;

color: #999;

}

.video-duration {

margin-top: 5px;

}

/* 视频列表样式 */

.video-list {

display: flex;

flex-wrap: wrap; /* 允许换行 */

gap: 20px; /* 设置项目之间的间距 */

margin: -10px; /* 调整外边距以对齐内部间距 */

}

</style>