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…

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

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

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

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

绝了!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;&#…

Javaweb-初学

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

LinkedIn被封原因和解封方法

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

IP白名单及其作用解析

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

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

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

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. 实现…

Vite:打包时去除console

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

c++指针和引用之高难度(二)习题讲解

1.【单选题】 int a[4] { 1001,1002,1003,1004 }&#xff1b; int* p{ &a[1] }; p[1] ? A 1001 B 1002 C 1003 解析&#xff1a;这道题考察了指针和数组可以混用。p 指向了 数组 a[0] 的地址&#xff0c;也就是 1002 的地址&#xff0c;此时 *p p[0]…

【多维动态规划】Leetcode 97. 交错字符串【中等】

交错字符串 给定三个字符串 s1、s2、s3&#xff0c;请你帮忙验证 s3 是否是由 s1 和 s2 交错 组成的。 两个字符串 s 和 t 交错 的定义与过程如下&#xff0c;其中每个字符串都会被分割成若干 非空 子字符串 子字符串 是字符串中连续的 非空 字符序列。 s s1 s2 … snt…

Redis 7.x 系列【11】数据类型之位图(Bitmap)

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Redis 版本 7.2.5 源码地址&#xff1a;https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 概述2. 基本命令2.1 SETBIT2.2 GETBIT2.3 BITCOUNT2.4 BITPOS2.5 BITFIELD2.6 BITF…

高端响应式网络科技公司网站源码pbootcms模板

模板介绍 这是一款高端响应式网络科技公司网站源码pbootcms模板&#xff0c;适合所有类型的网络公司展示&#xff0c;整站源码下载&#xff0c;为您简化开发过程&#xff0c;可自适应手机端。 模板截图 源码下载 高端响应式网络科技公司网站源码pbootcms模板

OpenAI禁止中国使用API,国内大模型市场何去何从

GPT-5 一年半后发布&#xff1f;对此你有何期待&#xff1f; 前言 前言&#xff1a; 近日&#xff0c;OpenAI宣布禁止中国用户使用其API&#xff0c;这一决策引起了国内大模型市场的广泛关注。面对这一挑战&#xff0c;国内大模型市场的发展路径和前景成为业界热议的焦点。本…

小时候的子弹击中了现在的我-hive进阶:案例解析(第18天)

系列文章目录 一、Hive表操作 二、数据导入和导出 三、分区表 四、官方文档&#xff08;了解&#xff09; 五、分桶表&#xff08;熟悉&#xff09; 六、复杂类型&#xff08;熟悉&#xff09; 七、Hive乱码解决&#xff08;操作。可以不做&#xff0c;不影响&#xff09; 八、…

Vue3学习笔记<->nginx部署vue项目(3)

安装nginx vue项目通常部署到nginx上&#xff0c;所以先安装一个nginx。为了方便安装的是windows版nginx&#xff0c;解压就能用。 项目参考上一篇文章《Vue3学习笔记&#xff1c;-&#xff1e;创建第一个vue项目》《Vue3学习笔记&#xff1c;-&#xff1e;创建第一个vue项目》…

uniapp启动页面鉴权页面闪烁问题

在使用uni-app开发app 打包完成后如果没有token&#xff0c;那么就在onLaunch生命周期里面判断用户是否登录并跳转至登录页。 但是在app中页面会先进入首页然后再跳转至登录页&#xff0c;十分影响体验。 处理方法&#xff1a; 使用plus.navigator.closeSplashscreen() 官网…