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

这篇文章主要介绍了SpringBoot+thymeleaf怎么实现读取视频列表并播放视频功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇SpringBoot+thymeleaf怎么实现读取视频列表并播放视频功能文章都会有所收获，下面我们一起来看看吧。

效果

Springboot播放视频

实现过程

后端程序示例

Controller层示例

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

package com.dvms.controller;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;@Controllerpublic 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";}

Service层

package com.dvms.service;import com.dvms.entity.Record;import com.dvms.entity.Video;import java.util.List;import java.util.Map;public interface ParamoduleService {    String findvideo(String id);    List<Video> findvideorecord();}

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;@Servicepublic 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();    }}

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;@Repositorypublic interface ParamoduleDao {     String findvideo(String id);     List<Video> findvideorecord();}

entity(pojo)层

package com.dvms.entity;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;}

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"><mapper namespace="com.dvms.dao.ParamoduleDao">    <!--查询存在视频-->    <select id="findvideo" resultType="String">        select filepath from video where id=#{id}    </select>    <!--查询存在视频记录-->    <select id="findvideorecord" resultType="Video">        select id,filename,filepath from video    </select></mapper>

video数据库表结构

前端程序示例

前端需引入thymeleaf、bootstrap等

videorecord.html

<div class="main col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"><!-- MAIN CONTENT --><div class="main-content"><div class="container-fluid"><h4 class="page-title">视频管理</h4><div class="row"><div class="col-md-15"><!-- BASIC TABLE --><div class="panel"><div class="panel-heading"><div><h4 class="panel-title" >视频记录</h4></div><!--<hr >--></div><div class="panel-body"><table class="table table-bordered table-sm table-hover"><tr class="table_header" ><td hidden>ID</td><td class="text-center">视频文件名</td><td class="text-center">操作</td></tr><tr th:class="${rowstate.odd}?'row1':'row2'" th:each="video,rowstate:${videorecord.list}"><td hidden><span th:text="${video.id}"></span></td><td class="text-center"><span th:text="${video.filename}"></span></td><td class="text-center"><a type="button" class="btn btn-info btn-xs" th:href="@{/angle/findvideo(id=${video.id},filenamev=${video.filename})}" rel="external nofollow" >播放</a>&nbsp;<a type="button" class="btn btn-info btn-xs" th:href="@{/angle/findvideo(id=${video.id})}" rel="external nofollow" >下载</a>&nbsp;</td></tr></table><div class="modal-footer no-margin-top"></div></div></div><!-- END CONDENSED TABLE --></div></div></div></div><!-- END MAIN CONTENT --></div>

videoshow.html

<div class="main col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"><!-- MAIN CONTENT --><div class="main-content"><div class="container-fluid"><h4 class="page-title">播放视频示例</h4><div class="panel"><div class="panel-body"><div class="dropdown" >                                        <a ><span>当前播放视频：</span><span  th:text="${videoname}"></span></a></div></div></div><div class="col-md-15"><!-- BASIC TABLE --><div class="panel"><div class="panel-heading"><div class="panel-body"><table class="table  table-sm table-hover"><tr  ><td>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX                                            </td><td ><!--<img th:class="lazy" data-src="${imageurl}">--><video align="center"width="800" height="550" controls><source th:class="lazy" data-src="${videourl}" type="video/mp4">您的浏览器不支持 HTML5 video 标签。</video></td><td>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX                                            </td></tr></table><div class="modal-footer no-margin-top"></div>                                    <div>                                    </div>                                </div></div></div></div></div></div><!-- END MAIN CONTENT --></div>

关于“SpringBoot+thymeleaf怎么实现读取视频列表并播放视频功能”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“SpringBoot+thymeleaf怎么实现读取视频列表并播放视频功能”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。