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

通过读取数据库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 {

@Autowired

private 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 {

@Autowired

private ParamoduleDao paramoduleDao;

//查出视频文件地址

@Override

public String findvideo(String id){

return paramoduleDao.findvideo(id);

}

//查出视频记录

@Override

public 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 mapper

PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"

"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

select filepath from video where id=#{id}

</select>

select id,filename,filepath from video

</select>

</mapper>

6. video数据库表结构

前端程序示例

前端需引入thymeleaf、bootstrap等

1. videorecord.html

</div>

</td>

视频文件名

</td>

操作

</td>

</tr>

</td>

</td>

</td>

</tr>

</table>

</div>

</div>

</div>

2. videoshow.html

<h3 class="page-title">播放视频示例</h3>

<a ><span>当前播放视频：</span><span style="color: #0f0f0f" th:text="${videoname}"></span></a>

</div>

<td>

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

</td>

您的浏览器不支持 HTML5 video 标签。

</video>

</td>

<td>

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

</td>

</tr>

</table>

</div>

<div>

</div>

</div>