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

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

效果

SpringBoot + thymeleaf 实现读取视频列表并播放视频功能_第1张图片

Springboot播放视频

SpringBoot + thymeleaf 实现读取视频列表并播放视频功能_第2张图片

SpringBoot + thymeleaf 实现读取视频列表并播放视频功能_第3张图片

实现过程

后端程序示例

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

SpringBoot + thymeleaf 实现读取视频列表并播放视频功能_第4张图片

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

SpringBoot + thymeleaf 实现读取视频列表并播放视频功能_第5张图片

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

SpringBoot + thymeleaf 实现读取视频列表并播放视频功能_第6张图片

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

SpringBoot + thymeleaf 实现读取视频列表并播放视频功能_第7张图片

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;

}

SpringBoot + thymeleaf 实现读取视频列表并播放视频功能_第8张图片

5. daoMapper.xml





    
    

    
    


SpringBoot + thymeleaf 实现读取视频列表并播放视频功能_第9张图片

6. video数据库表结构

SpringBoot + thymeleaf 实现读取视频列表并播放视频功能_第10张图片

SpringBoot + thymeleaf 实现读取视频列表并播放视频功能_第11张图片

前端程序示例

前端需引入thymeleaf、bootstrap等

SpringBoot + thymeleaf 实现读取视频列表并播放视频功能_第12张图片

1. videorecord.html

		

视频管理

视频记录

视频文件名 操作
播放  下载 

2. videoshow.html

		

播放视频示例

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

到此这篇关于SpringBoot + thymeleaf 实现读取视频列表并播放视频的文章就介绍到这了,更多相关SpringBoot thymeleaf 视频内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(SpringBoot + thymeleaf 实现读取视频列表并播放视频功能)