HTML 5 视频流 + Spring boot

Question

我有这个控制器：

@GetMapping(value = "videos/{id}/{name}")
@ResponseBody
public final ResponseEntity<InputStreamResource>
retrieveResource(@PathVariable(value = "id") final String id,
                 @PathVariable(value = "name") final String name) throws Exception {

    File initialFile = new File(id + name);
    InputStream targetStream = new FileInputStream(initialFile);

    HttpHeaders headers = new HttpHeaders();
    headers.setContentType(MediaType.valueOf("video/mp4"));
    headers.set("Accept-Ranges", "bytes");
    headers.set("Expires", "0");
    headers.set("Cache-Control", "no-cache, no-store");
    headers.set("Connection", "keep-alive");
    headers.set("Content-Transfer-Encoding", "binary");

    return new ResponseEntity<>(new InputStreamResource(targetStream), headers, HttpStatus.OK);

}

当我使用浏览器访问 http://localhost:7080/videos/2/3

我看到了视频，但当我把它放在 HTML 页面中时却没有：

 <div class="media-box foto">
                <video width="320" height="240" controls>

                    <video url="http://localhost:7080/videos/2/3" type="video/mp4">

                </video>
            </div>

Answer 1

您的 Java 代码看起来不错。问题与您的 HTML 有关。

请尝试一下：

<div class="media-box foto">
  <video src="http://localhost:7080/videos/2/3"
         width="320" height="240" controls>
    <p>Your browser does not support HTML5 video. Here is a <a href="http://localhost:7080/videos/2/3">link to the video</a> instead.</p>
  </video>
</div>

除非您有多个视频格式，否则通常不会指明视频格式。例如：

<div class="media-box foto">
  <video width="320" height="240" controls>
    <source src="http://localhost:7080/videos/2/3?format=mp4" type="video/mp4">
    <source src="http://localhost:7080/videos/2/3?format=webm" type="video/webm">
    <p>Your browser does not support HTML5 video. Here is a <a href="http://localhost:7080/videos/2/3">link to the video</a> instead.</p>
  </video>
</div>

您可以添加其他属性，例如 autoplay 或 muted。请参阅MDN 上的相关文档。