SpringBoot+thymeleaf實現(xiàn)讀取視頻列表并播放視頻功能

第SpringBoot+thymeleaf實現(xiàn)讀取視頻列表并播放視頻功能目錄效果實現(xiàn)過程后端程序示例前端程序示例通過讀取數(shù)據庫video表獲取當前視頻的視頻名、視頻地址，展示至前端頁面videorecord.html，通過點擊播放按鈕獲取數(shù)據id進而得到所選視頻地址，跳轉播放視頻顯示頁videoshow.html，播放所選視頻。當然本案例只是為了展示主要的一些功能，其他比如跳轉、頁面布局美化等可以自行進行更改。

效果

Springboot播放視頻

實現(xiàn)過程

后端程序示例

1.Controller層示例

返回數(shù)據庫數(shù)據時，使用了pagehelp當中的PageInfo，為了后期擴展分頁功能，正常寫法返回值類型應為實體類Video.

packagecom.dvms.controller;

*文件名:VideoController

*創(chuàng)建者:CJW

*創(chuàng)建時間: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

*創(chuàng)建者:CJW

*創(chuàng)建時間: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

*創(chuàng)建者:CJW

*創(chuàng)建時間: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

*創(chuàng)建者:CJW

*創(chuàng)建時間:2025/1/1510:52

*描述:TODO

@Repository

publicinterfaceParamoduleDao{

Stringfindvideo(Stringid);

ListVideofindvideorecord();

4.entity(pojo)層

packagecom.dvms.entity;

*文件名:Video

*創(chuàng)建者:CJW

*創(chuàng)建時間: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數(shù)據庫表結構

前端程序示例

前端需引入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