SpringBoot + thymeleaf + mysql + html 实现读取视频列表并播放视频

通过读取数据库video表获取当前视频的视频名、视频地址，展示至前端页面videorecord.html，通过点击播放按钮获取数据id进而得到所选视频地址，跳转播放视频显示页videoshow.html，播放所选视频。当然本案例只是为了展示主要的一些功能，其他比如跳转、页面布局美化等可以自行进行更改。

效果

Springboot播放视频

实现过程

后端程序示例

1. Controller层示例

返回数据库数据时，使用了pagehelp当中的PageInfo，为了后期扩展分页功能，正常写法返回值类型应为实体类Video.

package com.dvms.controller;/**文件名: VideoController*创建者: CJW*创建时间:2022/4/14 16:40*描述: TODO*/import com.dvms.entity.Video;
import com.dvms.service.ParamoduleService;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;@Controller
public class VideoController {@Autowiredprivate ParamoduleService paramoduleService;//查出记录@RequestMapping("/angle/findvideoRecord")public String findvideorecords(Model model){System.out.println(paramoduleService.findvideorecord());PageInfo<Video> videoRecord = new PageInfo<>(paramoduleService.findvideorecord());model.addAttribute("videorecord", videoRecord);return "angle/videorecord";}// 查出视频地址@RequestMapping("/angle/findvideo")public String findvideo(String id, String filenamev, Model model){System.out.println(id);String videopath = paramoduleService.findvideo(id);System.out.println(videopath);model.addAttribute("videourl",videopath);model.addAttribute("videoname",filenamev);return "angle/videoshow";}}

2. Service层

package com.dvms.service;import com.dvms.entity.Record;
import com.dvms.entity.Video;import java.util.List;
import java.util.Map;/**文件名: ParamoduleService*创建者: CJW*创建时间:2022/1/15 10:54*描述: TODO*/
public interface ParamoduleService {String findvideo(String id);List<Video> findvideorecord();}

3. ServiceImpl层

package com.dvms.service.Impl;import com.dvms.dao.ParamoduleDao;
import com.dvms.entity.Record;
import com.dvms.entity.Video;
import com.dvms.service.ParamoduleService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;
import java.util.Map;/**文件名: ParamoduleServiceImpl*创建者: CJW*创建时间:2022/1/15 10:55*描述: TODO*/
@Service
public class ParamoduleServiceImpl implements ParamoduleService {@Autowiredprivate ParamoduleDao paramoduleDao;//查出视频文件地址@Overridepublic String findvideo(String id){return paramoduleDao.findvideo(id);}//查出视频记录@Overridepublic List<Video> findvideorecord(){return paramoduleDao.findvideorecord();}
}

4. dao(mapper)层

package com.dvms.dao;import com.dvms.entity.Record;
import com.dvms.entity.Video;
import org.springframework.stereotype.Repository;import java.util.List;
import java.util.Map;/**文件名: ParamoduleDao*创建者: CJW*创建时间:2022/1/15 10:52*描述: TODO*/@Repository
public interface ParamoduleDao {String findvideo(String id);List<Video> findvideorecord();
}

4. entity(pojo)层

package com.dvms.entity;/**文件名: Video*创建者: CJW*创建时间:2022/4/14 16:17*描述: TODO*/import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;
import lombok.experimental.Accessors;@Data
@ToString
@AllArgsConstructor
@NoArgsConstructor
@Accessors(chain = true) //链式调用public class Video {private String id;private String filename;private String filepath;}

5. daoMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.dvms.dao.ParamoduleDao"><!--查询存在视频--><select id="findvideo" resultType="String">select filepath from video where id=#{id}</select><!--查询存在视频记录--><select id="findvideorecord" resultType="Video">select id,filename,filepath from video</select></mapper>

6. video数据库表结构

前端程序示例

前端需引入thymeleaf、bootstrap等

1. videorecord.html

     <div class="main col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"><!-- MAIN CONTENT --><div class="main-content"><div class="container-fluid"><h3 class="page-title">视频管理</h3><div class="row"><div class="col-md-15"><!-- BASIC TABLE --><div class="panel"><div class="panel-heading"><div><h3 class="panel-title" style="color: #0f0f0f">视频记录</h3></div><!--<hr style="color: #6ecadc">--></div><div class="panel-body"><table class="table table-bordered table-sm table-hover"><tr class="table_header" style="background-color: #009bc8;color: #0f0f0f"><td hidden>ID</td><td class="text-center">视频文件名</td><td class="text-center">操作</td></tr><tr th:class="${rowstate.odd}?'row1':'row2'" th:each="video,rowstate:${videorecord.list}"><td hidden><span th:text="${video.id}"></span></td><td class="text-center"><span th:text="${video.filename}"></span></td><td class="text-center"><a type="button" class="btn btn-info btn-xs" th:href="@{/angle/findvideo(id=${video.id},filenamev=${video.filename})}">播放</a>&nbsp;<a type="button" class="btn btn-info btn-xs" th:href="@{/angle/findvideo(id=${video.id})}">下载</a>&nbsp;</td></tr></table><div class="modal-footer no-margin-top"></div></div></div><!-- END CONDENSED TABLE --></div></div></div></div><!-- END MAIN CONTENT --></div>

2. videoshow.html

     <div class="main col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"><!-- MAIN CONTENT --><div class="main-content"><div class="container-fluid"><h3 class="page-title">播放视频示例</h3><div class="panel"><div class="panel-body"><div class="dropdown" ><a ><span>当前播放视频：</span><span style="color: #0f0f0f" th:text="${videoname}"></span></a></div></div></div><div class="col-md-15"><!-- BASIC TABLE --><div class="panel"><div class="panel-heading"><div class="panel-body"><table class="table  table-sm table-hover"><tr  style="background-color: #FEFFFD;color: #FEFFFD"><td>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td><td style="text-align: center"><!--<img th:src="${imageurl}">--><video align="center"width="800" height="550" controls><source th:src="${videourl}" type="video/mp4">您的浏览器不支持 HTML5 video 标签。</video></td><td>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td></tr></table><div class="modal-footer no-margin-top"></div><div></div></div></div></div></div></div></div><!-- END MAIN CONTENT --></div>

SpringBoot + thymeleaf + mysql + html＜video＞实现读取视频列表并播放视频相关推荐

java springboot thymeleaf mysql餐厅点餐系统（还不错）
博主介绍:✌在职Java研发工程师.专注于程序设计.源码分享.技术交流.专注于Java技术领域和毕业设计✌ 项目名称 java springboot thymeleaf mysql餐厅点餐系统(还不 ...
91.video.ws index php_如何利用videojs实现视频列表循环播放（完整代码）
本篇文章给大家带来的内容是关于如何利用videojs实现视频列表循环播放(完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 庭审直播 .video-js { /* posit ...
基于Java+SpringBoot+Thymeleaf+Mysql在线教育视频点播学习系统设计与实现
项目背景和意义目的:本课题主要目标是设计并能够实现一个基于java的视频点播系统,系统整体使用了基于浏览的java+MySql的B/S架构,技术上使用了基于java的springboot框架:使用浏 ...
基于SpringBoot+thymeleaf+Mysql实现的资产管理系统
前言介绍: 固定资产管理系统是针对企业资产管理难题而推出的一款基于先进的RFID技术的管理系统.从PC.手机,以及飞书三大渠道,它可以规范企业固定资产业务流程,更好地规划企业所有资源的运用,包括资产入 ...
Springboot+Minio通过分片下载解决IOS下H5无法播放视频问题
一.环境说明 JDK 1.8 Springboot 2.7.5 Minio 8.4.5 Vue3实现的微信公众号网页二.问题描述当前项目是基于springboot和vue3的前后端分离架构,前端目 ...
AVPro Video 插件在unity中动态播放视频
如果视频放的多,电脑或一体机配置差,就会变得卡,做起来也很麻烦,所以我今天分享一下动态播放的方法 ,占内存小,省时省力.废话不多说直接上代码 public MediaPlayer mediaplaye ...
【实用】JavaScript中Video使用详解过程（多视频列表循环播放）
做过一个项目里有用到插入多个视频类似列表循环播放的,视频信息是从后台数据库传入的核心JS代码片段 <script type="text/javascript">var ...
ffmpeg解码H.264视频数据,MFC播放视频
ffmpeg 是一个完整的视频流解决方案,开源且有良好的跨平台性,ffmpeg具有强大的多媒体数据处理能力,能够实现视频的采集,多种视频格式间转换,给视频添加水印等多种功能,已被 VLC.Mplaye ...
多媒体——视频——利用视频视图VideoView播放视频
==================================================================================================== ...

SpringBoot + thymeleaf + mysql + html＜video＞实现读取视频列表并播放视频

SpringBoot + thymeleaf + mysql + html 实现读取视频列表并播放视频

效果

实现过程

后端程序示例

1. Controller层示例

2. Service层

3. ServiceImpl层

4. dao(mapper)层

4. entity(pojo)层

5. daoMapper.xml

6. video数据库表结构

前端程序示例

1. videorecord.html

2. videoshow.html

SpringBoot + thymeleaf + mysql + html＜video＞实现读取视频列表并播放视频相关推荐

最新文章

热门文章

SpringBoot + thymeleaf + mysql + html＜video＞ 实现读取视频列表并播放视频

SpringBoot + thymeleaf + mysql + html 实现读取视频列表并播放视频

效果

实现过程

后端程序示例

1. Controller层示例

2. Service层

3. ServiceImpl层

4. dao(mapper)层

4. entity(pojo)层

5. daoMapper.xml

6. video数据库表结构

前端程序示例

1. videorecord.html

2. videoshow.html

SpringBoot + thymeleaf + mysql + html＜video＞ 实现读取视频列表并播放视频相关推荐

最新文章

热门文章

SpringBoot + thymeleaf + mysql + html＜video＞实现读取视频列表并播放视频

SpringBoot + thymeleaf + mysql + html＜video＞实现读取视频列表并播放视频相关推荐