SpringBoot + thymeleaf 實(shí)現(xiàn)讀取視頻列表并播放視頻功能
更新時(shí)間：2022年04月16日 16:58:28 作者：豬耳朵*
這篇文章主要介紹了SpringBoot + thymeleaf 實(shí)現(xiàn)讀取視頻列表并播放視頻功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
通過讀取數(shù)據(jù)庫video表獲取當(dāng)前視頻的視頻名、視頻地址，展示至前端頁面videorecord.html，通過點(diǎn)擊播放按鈕獲取數(shù)據(jù)id進(jìn)而得到所選視頻地址，跳轉(zhuǎn)播放視頻顯示頁videoshow.html，播放所選視頻。當(dāng)然本案例只是為了展示主要的一些功能，其他比如跳轉(zhuǎn)、頁面布局美化等可以自行進(jìn)行更改。
效果
Springboot播放視頻
實(shí)現(xiàn)過程
后端程序示例
1. Controller層示例
返回?cái)?shù)據(jù)庫數(shù)據(jù)時(shí)，使用了pagehelp當(dāng)中的PageInfo，為了后期擴(kuò)展分頁功能，正常寫法返回值類型應(yīng)為實(shí)體類Video.
package com.dvms.controller;
/*
*文件名: VideoController
*創(chuàng)建者: CJW
*創(chuàng)建時(shí)間: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
*創(chuàng)建者: CJW
*創(chuàng)建時(shí)間: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
*創(chuàng)建者: CJW
*創(chuàng)建時(shí)間: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
*創(chuàng)建者: CJW
*創(chuàng)建時(shí)間: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
*創(chuàng)建者: CJW
*創(chuàng)建時(shí)間: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) //鏈?zhǔn)秸{(diào)用
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">
<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>
6. video數(shù)據(jù)庫表結(jié)構(gòu)
前端程序示例
前端需引入thymeleaf、bootstrap等
1. 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">
<h3 class="page-title">視頻管理</h3>
<div class="row">
<div class="col-md-15">
<!-- BASIC TABLE -->
<div class="panel">
<div class="panel-heading">
<div><h3 class="panel-title" style="color: #0f0f0f">視頻記錄</h3></div>
<!--<hr style="color: #6ecadc">-->
</div>
<div class="panel-body">
<table class="table table-bordered table-sm table-hover">
<tr class="table_header" style="background-color: #009bc8;color: #0f0f0f">
<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>
<a type="button" class="btn btn-info btn-xs" th:href="@{/angle/findvideo(id=${video.id})}" rel="external nofollow" >下載</a>
</td>
</tr>
</table>
<div class="modal-footer no-margin-top">
</div>
</div>
</div>
<!-- END CONDENSED TABLE -->
</div>
</div>
</div>
</div>
<!-- END MAIN CONTENT -->
</div>
2. 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">
<h3 class="page-title">播放視頻示例</h3>
<div class="panel">
<div class="panel-body">
<div class="dropdown" >
<a ><span>當(dāng)前播放視頻：</span><span style="color: #0f0f0f" 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 style="background-color: #FEFFFD;color: #FEFFFD">
<td>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</td>
<td style="text-align: center">
<!--<img th:src="${imageurl}">-->
<video align="center"width="800" height="550" controls>
<source th:src="${videourl}" type="video/mp4">
您的瀏覽器不支持 HTML5 video 標(biāo)簽。
</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>
到此這篇關(guān)于SpringBoot + thymeleaf 實(shí)現(xiàn)讀取視頻列表并播放視頻的文章就介紹到這了,更多相關(guān)SpringBoot thymeleaf 視頻內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- jquery+ajaxform+springboot控件實(shí)現(xiàn)數(shù)據(jù)更新功能
- SpringBoot解決ajax跨域問題的方法
- Springboot解決ajax+自定義headers的跨域請求問題
- SpringBoot基于Shiro處理ajax請求代碼實(shí)例
- SpringBoot結(jié)合Ajax實(shí)現(xiàn)登錄頁面實(shí)例
- AJAX?SpringBoot?前后端數(shù)據(jù)交互的項(xiàng)目實(shí)現(xiàn)
- SpringBoot+Hutool+thymeleaf完成導(dǎo)出Excel的實(shí)現(xiàn)方法
- springboot如何使用thymeleaf完成頁面緩存
- SpringBoot+Thymeleaf+ECharts實(shí)現(xiàn)大數(shù)據(jù)可視化(基礎(chǔ)篇)
- 在SpringBoot中配置Thymeleaf的模板路徑方式
- SpringBoot+thymeleaf+ajax實(shí)現(xiàn)局部刷新詳情
相關(guān)文章
SpringBoot監(jiān)聽Redis key失效事件的實(shí)現(xiàn)代碼
這篇文章給大家介紹了SpringBoot實(shí)現(xiàn)監(jiān)聽Redis key失效事件的方法,文中通過代碼示例給大家講解的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-02-02
jackson 實(shí)現(xiàn)null轉(zhuǎn)0 以及0轉(zhuǎn)null的示例代碼
這篇文章主要介紹了jackson 實(shí)現(xiàn)null轉(zhuǎn)0 以及0轉(zhuǎn)null的示例代碼，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Java鏈接redis_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了Java鏈接redis，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
本篇文章通過代碼實(shí)例給大家分享了學(xué)習(xí)Java線程的中斷機(jī)制的一些心得內(nèi)容，有興趣的朋友學(xué)習(xí)下吧。2017-12-12
解析Java中的隊(duì)列和用LinkedList集合模擬隊(duì)列的方法
這篇文章主要介紹了解析Java中的隊(duì)列和用LinkedList集合模擬隊(duì)列的方法,相關(guān)算法的實(shí)現(xiàn)也是ACM中的常見題目,需要的朋友可以參考下2015-08-08
Spring boot + LayIM + t-io 實(shí)現(xiàn)文件上傳、 監(jiān)聽用戶狀態(tài)的實(shí)例代碼
這篇文章主要介紹了Spring boot + LayIM + t-io 實(shí)現(xiàn)文件上傳、 監(jiān)聽用戶狀態(tài)的實(shí)例代碼,需要的朋友可以參考下2017-12-12
Java CompletableFuture如何實(shí)現(xiàn)超時(shí)功能
這篇文章主要為大家介紹了實(shí)現(xiàn)超時(shí)功能的基本思路以及CompletableFuture（之后簡稱CF）是如何通過代碼實(shí)現(xiàn)超時(shí)功能的,需要的小伙伴可以了解下2025-01-01
Java調(diào)用商品詳情API的項(xiàng)目實(shí)踐
在現(xiàn)代電子商務(wù)網(wǎng)站中,商品詳情API是一個(gè)重要的組件,本文就來介紹一下Java調(diào)用商品詳情API的項(xiàng)目實(shí)踐,具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11
這篇文章主要介紹了Spring中的事件發(fā)布機(jī)制原理解析,當(dāng)我們關(guān)心spring容器什么時(shí)候刷新，或者想在spring容器刷新的時(shí)候做一些事情,監(jiān)聽關(guān)心的事件，主要就是在ApplicationListener中寫對應(yīng)的事件,需要的朋友可以參考下2023-11-11
SpringBoot?+?proguard+maven多模塊實(shí)現(xiàn)代碼混淆的方法
這篇文章主要介紹了SpringBoot?+?proguard+maven多模塊實(shí)現(xiàn)代碼混淆的方法,多模塊跟單模塊一樣,在需要混淆模塊的pom文件中加入proguard依賴及配置,本文給大家講解的非常詳細(xì),感興趣的朋友一起看看吧2024-02-02