springboot + Vue前后端项目(第二十一记)

项目实战第二十一记

  • 写在前面
  • 1. springboot文件默认传输限制
  • 2. 安装视频插件包命令
  • 3. 前台Video.vue
  • 4. 创建视频播放组件videoDetail.vue
  • 5. 路由
  • 6. 效果图
  • 总结
  • 写在最后

写在前面

本篇主要讲解系统集成视频播放插件

1. springboot文件默认传输限制

在application.yml文件中添加如下配置,保障能够上传视频文件(防止文件超出大小报错
Spring Boot默认的文件上传大小限制是1MB

  servlet:multipart:max-file-size: 100MB     #设置传输文件最大大小max-request-size: 100MB  #设置请求大小 

2. 安装视频插件包命令

# 安装命令
npm install vue-video-player@5.0.2 --save   // 注意安装的版本
npm install video.js

3. 前台Video.vue

在前台目录文件下,创建视频管理页面

<template><div style="padding: 10px"><el-card><div v-for="item in videos" :key="item.id" style="margin: 10px 0; padding: 10px 0; color: #666; border-bottom: 1px dashed #ccc"><span style="font-size: 18px; cursor: pointer" class="item" @click="detail(item.id)">{{ item.name }}</span><span style="float: right; font-size: 12px; margin-top: 10px">文件大小:{{ item.size }} kb</span></div></el-card></div>
</template>
<script>
export default {name: "video",data(){return {videos: [],};},created(){this.getList()},methods:{getList(){this.request.get('/file/video').then(res => {// console.log(res);this.videos = res.data.filter(v => v.type == 'mp4');})},// 查看视频detail(id){this.$router.push({path: '/front/videoDetail', query: {id: id}});}}
}
</script>
<style scoped>
.item:hover {color: skyblue;background: none;
}
</style>

4. 创建视频播放组件videoDetail.vue

<template><div style="margin: 30px auto;"><div class='demo'><video-player class="video-player-box"ref="videoPlayer":playsinline="true":options="playerOptions"></video-player></div></div>
</template>
<script>
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'export default {name: "videoDetail",components: {videoPlayer},data(){return {playerOptions: {playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度autoplay: true, // 如果为true,浏览器准备好时开始回放。muted: false, // 默认情况下将会消除任何音频。loop: false, // 是否视频一结束就重新开始。preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)language: 'zh-CN',aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。sources: [{type: "video/mp4", // 类型src: '' // url地址}],poster: '', // 封面地址notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。controlBar: {timeDivider: true, // 当前时间和持续时间的分隔符durationDisplay: true, // 显示持续时间remainingTimeDisplay: true, // 是否显示剩余时间功能fullscreenToggle: true // 是否显示全屏按钮}}};},created(){this.playVideo()},methods:{playVideo(){// 获取url上的参数let id = this.$route.query.id;this.request.get('/file/detail/'+id).then(res => {this.playerOptions.sources[0].src = res.data.url;})}}
}
</script>
<style scoped></style>

提取的公共部分(供以后直接使用)

 <div class='demo'><video-player class="video-player-box"ref="videoPlayer":playsinline="true":options="playerOptions"></video-player></div>
playerOptions: {playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度autoplay: true, // 如果为true,浏览器准备好时开始回放。muted: false, // 默认情况下将会消除任何音频。loop: false, // 是否视频一结束就重新开始。preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)language: 'zh-CN',aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。sources: [{type: "video/mp4", // 类型src: '' // url地址}],poster: '', // 封面地址notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。controlBar: {timeDivider: true, // 当前时间和持续时间的分隔符durationDisplay: true, // 显示持续时间remainingTimeDisplay: true, // 是否显示剩余时间功能fullscreenToggle: true // 是否显示全屏按钮}}

5. 路由

{path: 'video',name: '视频管理',component: () => import('../views/front/Video.vue')
},
{// 在JavaScript本身以及大多数前端路由库(如React Router, Vue Router等)中,路由路径匹配时不区分大小写。// 所以,无论是'person'还是'Person'作为路径定义,用户访问时输入/person或/Person理论上都应能匹配到相同路由path: 'videoDetail',name: '视频播放',component: () => import('../views/front/VideoDetail.vue')
},

6. 效果图

在这里插入图片描述

总结

今天是此项目的最后一篇了,如果还有更新,可能是时间富余想加点什么功能;不过个人认为这个项目做到现在,差不多了。

写在最后

如果此文对您有所帮助,请帅戈靓女们务必不要吝啬你们的Zan,感谢!!不懂的可以在评论区评论,有空会及时回复。
文章会一直更新,后续会开启新的项目篇章

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/37532.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pip安装neuralcoref失败ERROR

最终解决的方法如下&#xff1a; git clone https://github.com/huggingface/neuralcoref.git cd neuralcoref pip install -r requirements.txt python setup.py install 原始步骤&#xff1a; 安装 neuralcoref 的依赖&#xff1a; 安装编译 neuralcoref 所需的依赖项&am…

PHP If...Else 语句的深入解析

PHP If...Else 语句的深入解析 在PHP编程语言中&#xff0c;if...else 语句是一种基本且强大的控制结构&#xff0c;它允许根据特定条件执行不同的代码块。这种结构对于决策制定和流程控制至关重要&#xff0c;是每位PHP开发者必须熟练掌握的内容。本文将详细探讨if...else语句…

boost asio异步服务器(4)处理粘包

粘包的产生 当客户端发送多个数据包给服务器时&#xff0c;服务器底层的tcp接收缓冲区收到的数据为粘连在一起的。这种情况的产生通常是服务器端处理数据的速率不如客户端的发送速率的情况。比如&#xff1a;客户端1s内连续发送了两个hello world&#xff01;,服务器过了2s才接…

MCU解决800V电动汽车牵引逆变器的常见设计挑战的3种方式

电动汽车 (EV) 牵引逆变器是电动汽车的。它将高压电池的直流电转换为多相&#xff08;通常为三相&#xff09;交流电以驱动牵引电机&#xff0c;并控制制动产生的能量再生。电动汽车电子产品正在从 400V 转向 800V 架构&#xff0c;这有望实现&#xff1a; 快速充电 – 在相同…

WPF 2024 金九银十 最新 高级 架构 面试题 C#

含入门 初级 中级 高级 不同级别WPF的面试题 相关面试题 redis安装说明书 http://t.csdnimg.cn/iM260 单体并发瓶颈 redis sqlsever mysql多少 http://t.csdnimg.cn/DTXIh Redis高频面试题http://t.csdnimg.cn/FDOnv 数据库SqlServer笔试题 数据库SqlServer笔试题-CSDN博客 SQL…

绝了!Stable Diffusion做AI治愈图片视频,用来做副业简直无敌!10分钟做一个爆款视频保姆教程

一 项目分析 这个治愈类视频的玩法是通过AI生成日常生活场景&#xff0c;制作的vlog&#xff0c;有这样的一个号&#xff0c;发布了几条作品&#xff0c;就涨粉了2000多&#xff0c;点赞7000多&#xff0c;非常的受欢迎。 下面给大家看下这种作品是什么样的&#xff0c;如图所…

探索高效开发神器:Blackbox AI(免费编程助手)

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 &#x1f916; 想要代码生成&#xff1f;&#x1f44c; &#x1f4ac; 需要和AI聊天解决难题&#xff1f;&#…

Ubuntu使用c++

Ubuntu使用c 一、安装编译器和开发工具二、创建一个c文件并运行1.创建一个c2.编译运行 一、安装编译器和开发工具 先安装vim sudo apt install vim再安装GUN编译器合集&#xff08;GCC&#xff09; sudo apt install build-essential使用g -v查看版本确定安装成功 二、创建…

Javaweb-初学

1.利用springboot开发一个web应用 简要流程&#xff0c;如下图 2.如何创建一个springboot的项目&#xff0c;下面两张图片是重点关注 第一张图片记得和图片一样改一下路径 第二张就是勾一个选项 3.第一个简单的springboot应用的开发 根据如下步骤进行操作 首先顶部要标识Res…

TensorFlow的学习1.2-基本概念

TensorFlow的学习2-基本概念 1. 张量&#xff08;Tensor&#xff09;2. 变量&#xff08;Variable&#xff09;3. 操作&#xff08;Operation&#xff09;4. 计算图&#xff08;Computational Graph&#xff09;5. 会话&#xff08;Session&#xff09;6. Eager Execution7. 数…

LinkedIn被封原因和解封方法

对于初识领英和对领英生态规则不熟悉的人来说&#xff0c;很容易造成领英账号被封号(被限制登录)的情况&#xff0c;那么如何才能避免和解决领英帐号被封号(被限制登录)的难题呢&#xff1f; 领英帐号被封号或被限制登录主要会有两类情况。 首先要搞清楚&#xff0c; Linkedi…

IP白名单及其作用解析

在网络安全领域&#xff0c;IP白名单是一项至关重要的策略&#xff0c;它允许特定的IP地址或地址范围访问网络资源&#xff0c;从而确保只有受信任的终端能够连接。下面&#xff0c;我们将深入探讨IP白名单的定义、作用以及实施时的关键考虑因素。 一、IP白名单的定义 IP白名单…

HTML与Python生成验证码的对比分析

前言 验证码&#xff08;CAPTCHA&#xff09;是确保用户行为为人类而非机器人自动执行的一种安全机制。通过图形、文字、或其他手段生成复杂的验证码来防止自动化攻击是一种常见的方法。本文将对比分析使用HTML与JavaScript和Python生成验证码的两种方式&#xff0c;探讨各自的…

【scau大数据原理】期末复习——堂测题

一、集群安装知识 启动集群的命令start-all.sh位于 Hadoop安装目录的sbin文件夹 目录下。 bin文件夹下包含常见的Hadoop,yarn命令&#xff1b;sbin命令下包含集群的启动、停止命令。 启动集群的命令start-all.sh包含 同时启动start-dfs.sh和start-yarn.sh 功能。…

AI与Python共舞:如何利用深度学习优化推荐系统?

AI与Python共舞&#xff1a;如何利用深度学习优化推荐系统&#xff1f; 当你在浏览新闻、电影或是购物平台时&#xff0c;那些仿佛读懂你心思的个性化推荐背后&#xff0c;正是AI技术与Python语言的精妙协作。今天&#xff0c;我们将通过一个实际案例&#xff0c;探索如何利用…

Python 面试【中级】

欢迎莅临我的博客 &#x1f49d;&#x1f49d;&#x1f49d;&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

已解决javax.xml.bind.MarshalException:在RMI中,参数或返回值无法被编组的正确解决方法,亲测有效!!!

已解决javax.xml.bind.MarshalException&#xff1a;在RMI中&#xff0c;参数或返回值无法被编组的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 目录 问题分析 出现问题的场景 服务器端代码 客户端代码 报错原因 解决思路 解决方法 1. 实现…

大数据面试题之Hive(1)

说下为什么要使用Hive?Hive的优缺点?Hive的作用是什么? 说下Hive是什么?跟数据仓库区别? Hive架构 Hive内部表和外部表的区别? 为什么内部表的删除&#xff0c;就会将数据全部删除&#xff0c;而外部表只删除表结构?为什么用外部表更好? Hive建表语句?创建表时使…

Vite:打包时去除console

需求描述 在生产环境下&#xff0c;Vite打包项目时&#xff0c;需要去除开发时加入的console、debugger调试信息&#xff0c;但是又不想引入terser。 解决方案 esbuild 参考&#xff1a; esbuild - API 修改配置 修改vite.config.js配置文件&#xff0c;新增配置项如下&…

深入了解语音识别:Distil-Whisper

Distil-Whisper模型概述 1.1 Distil-Whisper的背景与意义 随着语音识别技术的不断发展&#xff0c;模型的大小和计算复杂度成为了制约其广泛应用的重要因素。特别是在边缘设备和实时应用场景中&#xff0c;对模型的效率和性能提出了更高的要求。Distil-Whisper模型的提出&…