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

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

目录效果实现过程后端程序示例前端程序示例

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

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

}

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

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

}

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

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

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

select filepath from video where id=#{id}

select id,filename,filepath from video

6. video数据库表结构

前端程序示例

前端需引入thymeleaf、bootstrap等

1. videhttp://orecord.html

ID

视频文件名

操作

播放 

- 

2. videoshow.html

当前播放视频：

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。