SpringBoot+thymeleaf实现读取视频列表并播放视频功能

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

效果

Springboot播放视频

实现过程

后端程序示例

1.Controller层示例

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

packagecom.dvms.controller;

*文件名:VideoController

*创建者:CJW

*创建时间:2025/4/1416:40

*描述:TODO

importcom.dvms.entity.Video;

importcom.dvms.service.ParamoduleService;

importcom.github.pagehelper.PageInfo;

importorg.springframework.beans.factory.annotation.Autowired;

importorg.springframework.stereotype.Controller;

importorg.springframework.ui.Model;

importorg.springframework.web.bind.annotation.RequestMapping;

@Controller

publicclassVideoController{

@Autowired

privateParamoduleServiceparamoduleService;

//查出记录

@RequestMapping("/angle/findvideoRecord")

publicStringfindvideorecords(Modelmodel){

System.out.println(paramoduleService.findvideorecord());

PageInfoVideovideoRecord=newPageInfo(paramoduleService.findvideorecord());

model.addAttribute("videorecord",videoRecord);

return"angle/videorecord";

//查出视频地址

@RequestMapping("/angle/findvideo")

publicStringfindvideo(Stringid,Stringfilenamev,Modelmodel){

System.out.println(id);

Stringvideopath=paramoduleService.findvideo(id);

System.out.println(videopath);

model.addAttribute("videourl",videopath);

model.addAttribute("videoname",filenamev);

return"angle/videoshow";

2.Service层

packagecom.dvms.service;

importcom.dvms.entity.Record;

importcom.dvms.entity.Video;

importjava.util.List;

importjava.util.Map;

*文件名:ParamoduleService

*创建者:CJW

*创建时间:2025/1/1510:54

*描述:TODO

publicinterfaceParamoduleService{

Stringfindvideo(Stringid);

ListVideofindvideorecord();

3.ServiceImpl层

packagecom.dvms.service.Impl;

importcom.dvms.dao.ParamoduleDao;

importcom.dvms.entity.Record;

importcom.dvms.entity.Video;

importcom.dvms.service.ParamoduleService;

importorg.springframework.beans.factory.annotation.Autowired;

importorg.springframework.stereotype.Service;

importjava.util.List;

importjava.util.Map;

*文件名:ParamoduleServiceImpl

*创建者:CJW

*创建时间:2025/1/1510:55

*描述:TODO

@Service

publicclassParamoduleServiceImplimplementsParamoduleService{

@Autowired

privateParamoduleDaoparamoduleDao;

//查出视频文件地址

@Override

publicStringfindvideo(Stringid){

returnparamoduleDao.findvideo(id);

//查出视频记录

@Override

publicListVideofindvideorecord(){

returnparamoduleDao.findvideorecord();

4.dao(mapper)层

packagecom.dvms.dao;

importcom.dvms.entity.Record;

importcom.dvms.entity.Video;

importorg.springframework.stereotype.Repository;

importjava.util.List;

importjava.util.Map;

*文件名:ParamoduleDao

*创建者:CJW

*创建时间:2025/1/1510:52

*描述:TODO

@Repository

publicinterfaceParamoduleDao{

Stringfindvideo(Stringid);

ListVideofindvideorecord();

4.entity(pojo)层

packagecom.dvms.entity;

*文件名:Video

*创建者:CJW

*创建时间:2025/4/1416:17

*描述:TODO

importlombok.AllArgsConstructor;

importlombok.Data;

importlombok.NoArgsConstructor;

importlombok.ToString;

importlombok.experimental.Accessors;

@Data

@ToString

@AllArgsConstructor

@NoArgsConstructor

@Accessors(chain=true)//链式调用

publicclassVideo{

privateStringid;

privateStringfilename;

privateStringfilepath;

5.daoMapper.xml

xmlversion="1.0"encoding="UTF-8"

!DOCTYPEmapper

PUBLIC"-////DTDMapper3.0//EN"

"/dtd/mybatis-3-mapper.dtd"

mappernamespace="com.dvms.dao.ParamoduleDao"

!--查询存在视频--

selectid="findvideo"resultType="String"

selectfilepathfromvideowhereid=#{id}

/select

!--查询存在视频记录--

selectid="findvideorecord"resultType="Video"

selectid,filename,filepathfromvideo

/select

/mapper

6.video数据库表结构

前端程序示例

前端需引入thymeleaf、bootstrap等

1.videorecord.html

div

!--MAINCONTENT--

div

div

h3视频管理/h3

div

div

!--BASICTABLE--

div

div

divh3视频记录/h3/div

!--hr--

/div

div

table

tdhidden

/td

视频文件名

/td

/td

/tr

trth:class="${rowstate.odd}'row1':'row2'"th:each="video,rowstate:${videorecord.list}"

tdhidden

spanth:text="${video.id}"/span

/td

spanth:text="${video.filename}"/span

/td

atype="button"th:href="@{/angle/findvideo(id=${video.id},filenamev=${video.filename})}"rel="externalnofollow"播放/anbsp;

atype="button"th:href="@{/angle/findvideo(id=${video.id})}"rel="externalnofollow"下载/anbsp;

/td

/tr

/table

div

/div

/div

/div

!--ENDCONDENSEDTABLE--

/div

/div

/div

/div

!--ENDMAINCONTENT--

/div

2.videoshow.html

div

!--MAINCONTENT--

div

div

h3播放视频示例/h3

div

div

div

aspan当前播放视频：/spanspanth:text="${videoname}"/span/a

/div

/div

/div

div

!--BASICTABLE--

div

div

div

table

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

/td

!--imgth:src="${imageurl}"--

videoalign="center"width="800"height="550"controls