Question

我有一个从数据库检索并显示在网页上的视频缩略图列表。目标是单击缩略图时，将显示一个新页面以及相应的视频。

Controller类。

@Controller
public class JeutrollController {
@Autowired
private JeutrollService jeutrollService;

@Autowired
private FileSystemStorageService storageService;

@Autowired
private VideoRepository videoRepository;

@RequestMapping("/home")
public String index(Model model) {
    model.addAttribute("videos", videoRepository.findAll());
    return "videoView";
} 
@GetMapping("/videoPlay")
public String videoPlay(@Valid Video video, Model model) {

    return "videoPlay";
}
}

videoView页面：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  layout:decorator="template1.html">
<head>
<meta charset="UTF-8">
<title>Jeutroll</title>
</head>
<body>
<div layout:fragment="content">
<div class="list-group">
    <a th:each="video : ${videos}" class="list-group-item">
        <a th:href="@{/videoPlay}">
 <img th:src="${video.thumbnail}" alt="Image 2" width="500px                "/>
        </a>
    </a>
</div>

</div>
</body>
</html>

videoPlay页面：

  <!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  layout:decorator="template1.html">
     <head>
       <meta charset="UTF-8">
       <title>Jeutroll</title>
     </head>
   <body>
     <div layout:fragment="content">
      <label>You re link is here</label>
     </div>
    </body>
   </html>

我想在videoPlay页面中使用以下行，但/ videoPlay中的视频对象为null。

<iframe width="560" height="315" th:src="${video.path}" frameborder="1" alt="no 
video attached" allowfullscreen="0"></iframe>

单击缩略图时，如何在/ videoPlay控制器中放置对象视频。

我希望这很清楚。

谢谢。

Answer 1

为解决此问题，我使用了@PathVariable批注来传递视频ID。然后我使用ID获得了相应的视频。

@GetMapping("/videoPlay/{id}")
public String videoPlay(Model model, @PathVariable(required = true) String id) {

    Integer idNumber = Integer.valueOf(id);

    Optional<Video> videoOptional = videoRepository.findById(idNumber);

    if (videoOptional.isPresent()) {

        Video video = videoOptional.get();

        model.addAttribute("link", video.getLink());

    } else {

        System.err.println("The video with the id = " + idNumber + " does not exist");
    }
    return "videoPlay";
}

视频播放页面：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="template1.html">
<head>
    <meta charset="UTF-8">
    <title>Jeutroll</title>
</head>
<body>
<div layout:fragment="content">

    <iframe width="560" height="315" th:src="${link}" frameborder="1" alt="no video attached" allowfullscreen="0"></iframe>

</div>
</body>
</html>

发送变量链接的videoView页面：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="template1.html">
<head>
     <meta charset="UTF-8">
     <title>Jeutroll</title>
</head>
<body>
 <div layout:fragment="content">
 <div class="list-group">
 <a th:each="video : ${videos}" class="list-group-item">
  <a th:href="@{/videoPlay/{id}(id=${video.id})}"> 
     <img th:src="${video.thumbnail}" alt="Image 2" width="500px"/>
  </a>
  </a>
</div>

</div>
</body>
</html>

单击视频的缩略图并播放视频

1 个答案: