Springboot项目使用html5的video标签完成视频播放功能

时间：2021-05-20

文件的上传与下载会另外再写一篇博客，本篇博客只是记录视频播放功能的实现过程

1.首先引入pom文件: pom.xml

<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://.wulaobo.mapper.VideoMapper"> <select id="getVideoById" parameterType="Integer" resultType="video"> select * from t_video where id=#{id} </select></mapper>

6.获取到视频存放路径之后，跳转到视频播放页面：VideoPlay.html

<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head> <title>在线视频播放</title> <link rel="shortcut icon" th:href="@{/favicon.ico}" rel="external nofollow" /> <link rel="stylesheet" th:href="@{/static/bootstrap/css/bootstrap.min.css}" rel="external nofollow" > <script th:src="@{/static/js/jquery-3.3.1.min.js}"></script> <script th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script></head><body><!--<div th:replace="header::header1"></div><br/><br/><br/>--><div class="text-right "> <span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span> <a th:href="@{getAllNews}" rel="external nofollow" >点此返回主页</a></div><div class="panel panel-default"> <div class="panel-body" align="center"> <div id="a1" align="center" th:text="${title}"></div><br/> <video width="600" height="400" align="center" controls> <source th:src="@{'/upload/'+${path}}" type="video/mp4"> 您的浏览器不支持 HTML5 video 标签。 </video> </div></div></body></html>

7.然后视频就开始播放啦。。。

项目完整代码已托管到github平台上：链接: 点我看项目源码.

到此这篇关于Springboot项目使用html5的video标签完成视频播放功能的文章就介绍到这了,更多相关Springboot视频播放内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章