springboot实现本地文件夹下的视频流在网页上列表显示并可以点击播放
时间: 2024-02-05 08:11:32 浏览: 110
要实现本地文件夹下的视频流在网页上列表显示并可点击播放,可以使用Spring Boot和HTML5的video标签。
首先,在Spring Boot中创建一个Controller类,用于处理请求:
```java
@Controller
public class VideoController {
@GetMapping("/")
public String index(Model model) {
File folder = new File("path/to/videos");
File[] files = folder.listFiles();
List<String> videoNames = new ArrayList<>();
for (File file : files) {
if (file.isFile()) {
videoNames.add(file.getName());
}
}
model.addAttribute("videoNames", videoNames);
return "index";
}
@GetMapping("/play/{videoName}")
public String play(@PathVariable String videoName, Model model) {
model.addAttribute("videoName", videoName);
return "play";
}
}
```
在上面的代码中,`index`方法会获取指定文件夹下的所有视频文件的文件名,并将其存储到`videoNames`列表中,然后将其传递给`index.html`模板。
`play`方法会将选定的视频文件名传递给`play.html`模板。
接下来,创建两个HTML模板文件`index.html`和`play.html`,用于在浏览器中显示视频列表和播放视频:
`index.html`:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video Player</title>
</head>
<body>
<h1>Video List</h1>
<ul>
<li th:each="videoName : ${videoNames}">
<a th:href="@{'/play/' + ${videoName}}" th:text="${videoName}"></a>
</li>
</ul>
</body>
</html>
```
在上面的代码中,使用了Thymeleaf模板引擎,将视频文件列表显示为超链接,点击超链接会跳转到`play`方法,播放选定的视频文件。
`play.html`:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title th:text="${videoName}"></title>
</head>
<body>
<video width="640" height="480" controls>
<source th:src="@{'/videos/' + ${videoName}}" type="video/mp4">
</video>
</body>
</html>
```
在上面的代码中,使用了HTML5的video标签,将选定的视频文件以MP4格式进行播放。
最后,在本地服务器上创建一个`videos`文件夹,并将所有的视频文件存储到该文件夹中。
然后,运行Spring Boot应用程序,访问`http://localhost:8080/`,即可看到视频文件列表。点击列表中的视频文件,将会跳转到`play`页面,开始播放选定的视频文件。