Нажмите на миниатюру видео и воспроизведите видео - PullRequest
0 голосов
/ 08 мая 2019

У меня есть список миниатюр видео, извлеченных из базы данных и отображенных на веб-странице. Цель состоит в том, чтобы при нажатии на миниатюру отображалась новая страница с соответствующим видео.

Класс контроллера.

@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";
}
}

Страница просмотра видео:

<!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>

Страница воспроизведения видео:

  <!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 controller.

Надеюсь, это понятно.

Спасибо.

1 Ответ

0 голосов
/ 09 мая 2019

Чтобы решить эту проблему, я использовал аннотацию @PathVariable для передачи идентификатора видео.Затем я получил соответствующее видео, используя идентификатор.

@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";
}

Страница 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>

Страница просмотра видео, на которую отправляется ссылка на переменную:

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...