当前位置: 首页 > news >正文

用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>

相关文章:

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

效果如下图所示 首页有导航栏&#xff0c;搜索框&#xff0c;和视频列表&#xff0c; 导航栏如下图 搜索框如下图 视频列表如下图 文件目录 视频首页页面代码如下 <template> <view class"video-home"> <!-- 搜索栏 --> <view class…...

【视觉SLAM:八、后端Ⅰ】

视觉SLAM的后端主要解决状态估计问题&#xff0c;它是优化相机轨迹和地图点的过程&#xff0c;从数学上看属于非线性优化问题。后端的目标是结合传感器数据&#xff0c;通过最优估计获取系统的状态&#xff08;包括相机位姿和场景结构&#xff09;&#xff0c;在状态估计过程中…...

PaddleOCROCR关键信息抽取训练过程

步骤1&#xff1a;python版本3.8.20 步骤2&#xff1a;下载代码&#xff0c;安装依赖 git clone https://gitee.com/PaddlePaddle/PaddleOCR.git pip uninstall opencv-python -y # 安装PaddleOCR的依赖 ! pip install -r requirements.txt # 安装关键信息抽取任务的依赖 !…...

用Python操作字节流中的Excel文档

Python能够轻松地从字节流中加载文件&#xff0c;在不依赖于外部存储的情况下直接对其进行读取、修改等复杂操作&#xff0c;并最终将更改后的文档保存回字节串中。这种能力不仅极大地提高了数据处理的灵活性&#xff0c;还确保了数据的安全性和完整性&#xff0c;尤其是在网络…...

python 桶排序(Bucket Sort)

桶排序&#xff08;Bucket Sort&#xff09; 桶排序是一种分布式排序算法&#xff0c;适用于对均匀分布的数据进行排序。它的基本思想是&#xff1a;将数据分到有限数量的桶中&#xff0c;每个桶分别排序&#xff0c;最后将所有桶中的数据合并。 桶排序的步骤&#xff1a; 划…...

Elasticsearch:探索 Elastic 向量数据库的深度应用

Elasticsearch&#xff1a;探索 Elastic 向量数据库的深度应用 一、Elasticsearch 向量数据库简介 1. Elasticsearch 向量数据库的概念 Elasticsearch 本身是一个基于 Lucene 的搜索引擎&#xff0c;提供了全文搜索和分析的功能。随着技术的发展&#xff0c;Elasticsearch 也…...

【每日学点鸿蒙知识】属性变量key、waterflow卡顿问题、包无法上传、Video控件播放视频、Vue类似语法

1、HarmonyOS 属性变量常量是否可以作为object对象的key&#xff1f; a: object new Object() this.a[Constants.TEST_KEY] "456" 可以先定义&#xff0c;再赋值 2、首页点击回到waterflow的首节点&#xff0c;0~index全部节点被重建&#xff0c;导致卡顿 使用s…...

小程序中引入echarts(保姆级教程)

hello hello~ &#xff0c;这里是 code袁~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f981;作者简介&#xff1a;一名喜欢分享和记录学习的在校大学生…...

基于 Node.js 的 ORM(对象关系映射)工具——Sequelize介绍与使用,并举案例分析

便捷性介绍 支持多种数据库&#xff0c;包括 PostgreSQL、MySQL、MariaDB、SQLite 和 Microsoft SQL Server。Sequelize 提供了丰富的功能&#xff0c;帮助开发者用 JavaScript&#xff08;或 TypeScript&#xff09;代码操作数据库&#xff0c;而无需直接书写 SQL 语句。 Se…...

python 插入排序(Insertion Sort)

插入排序&#xff08;Insertion Sort&#xff09; 插入排序是一种简单的排序算法。它的基本思想是&#xff1a;将数组分为已排序部分和未排序部分&#xff0c;然后逐个将未排序部分的元素插入到已排序部分的正确位置。插入排序类似于整理扑克牌的过程。 插入排序的步骤&#…...

电子应用设计方案81:智能AI冲奶瓶系统设计

智能 AI 冲奶瓶系统设计 一、引言 智能 AI 冲奶瓶系统旨在为父母或照顾者提供便捷、准确和卫生的冲奶服务&#xff0c;特别是在夜间或忙碌时&#xff0c;减轻负担并确保婴儿获得适宜的营养。 二、系统概述 1. 系统目标 - 精确调配奶粉和水的比例&#xff0c;满足不同年龄段婴…...

JAVA高并发总结

JAVA高并发编程总结 在现代应用中&#xff0c;高并发编程是非常重要的一部分&#xff0c;尤其是在分布式系统、微服务架构、实时数据处理等领域。Java 提供了丰富的并发工具和技术&#xff0c;帮助开发者在多线程和高并发的场景下提高应用的性能和稳定性。以下是 Java 高并发编…...

【AIGC】使用Java实现Azure语音服务批量转录功能:完整指南

文章目录 引言技术背景环境准备详细实现1. 基础架构设计2. 实现文件上传功能3. 提交转录任务crul4. 获取转录结果 使用示例结果示例最佳实践与注意事项总结 引言 在当今数字化时代&#xff0c;将音频内容转换为文本的需求越来越普遍。无论是会议记录、视频字幕生成&#xff0c…...

arcgis模版空库怎么用(一)

这里以某个项目的数据为例&#xff1a; 可以看到&#xff0c;属性表中全部只有列标题&#xff0c;无数据内容 可能有些人会认为空库是用来往里面加入信息的&#xff0c;其实不是&#xff0c;正确的用法如下&#xff1a; 一、下图是我演示用的数据&#xff0c;我们可以看到其中…...

【电机控制】基于STC8H1K28的六步换向——方波驱动(软件篇)

【电机控制】基于STC8H1K28的六步换向——方波驱动&#xff08;软件篇&#xff09; 文章目录 [TOC](文章目录) 前言一、main.c二、GPIO.c三、PWMA.c四、ADC.c五、CMP.c六、Timer.c七、PMSM.c八、参考资料总结 前言 【电机控制】STC8H无感方波驱动—反电动势过零检测六步换向法 …...

小程序配置文件 —— 13 全局配置 - window配置

全局配置 - window配置 这里讲解根目录 app.json 中的 window 字段&#xff0c;window 字段用于设置小程序的状态栏、导航条、标题、窗口背景色&#xff1b; 状态栏&#xff1a;顶部位置&#xff0c;有网络信号、时间信息、电池信息等&#xff1b;导航条&#xff1a;有一个当…...

全球域名市场科普之域名交易平台介绍——Sedo与Afternic

关于Dynadot Dynadot是通过ICANN认证的域名注册商&#xff0c;自2002年成立以来&#xff0c;服务于全球108个国家和地区的客户&#xff0c;为数以万计的客户提供简洁&#xff0c;优惠&#xff0c;安全的域名注册以及管理服务。 Dynadot平台操作教程索引&#xff08;包括域名邮…...

leetcode108:将有序数组转化为二叉搜索树

给你一个整数数组 nums &#xff0c;其中元素已经按 升序 排列&#xff0c;请你将其转换为一棵 平衡 二叉搜索树。 示例 1&#xff1a; 输入&#xff1a;nums [-10,-3,0,5,9] 输出&#xff1a;[0,-3,9,-10,null,5] 解释&#xff1a;[0,-10,5,null,-3,null,9] 也将被视为正确…...

截图技术方案

安卓截屏技术附带悬浮窗自动存储功能_安卓截图浮窗-CSDN博客 https://chat.baidu.com/search?dyTabStrMCwxMiwzLDEsMiwxMyw3LDYsNSw5&pdcsaitab&setypecsaitab&extParamsJson%7B%22apagelid%22%3A%2210990774271994514433%22%2C%22enter_type%22%3A%22a_ai_index%…...

程序员测试日常小工具

作为一名程序员&#xff0c;或者测试人员&#xff0c;日常工作最常用的工具有哪些&#xff0c;截图&#xff0c;截图漂浮&#xff0c;翻译&#xff0c;日期处理&#xff0c;api调用...&#xff0c; 当你拿到一串报文后&#xff0c;想要json转换时&#xff0c;是不是要打…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

跨链模式:多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...