使用Thymeleaf播放AWS S3中MP4文件的问题排查

核心问题点 #

你的Thymeleaf模板里引用的视频路径@{/files/{filename}}没有对应的后端接口处理，前端请求该路径时无法获取到AWS S3上的视频资源，导致播放器能加载UI但无法读取视频内容。另外，视频存储在云端S3，直接用本地文件路径的方式无法访问到资源。

具体解决步骤 #

1. 新增S3文件访问接口 #

在后端新增接口处理/files/{filename}请求，通过AWS SDK从S3拉取对应视频并返回给前端：

import com.amazonaws.services.s3.AmazonS3;
import com.amazonaws.services.s3.model.S3Object;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.io.InputStreamResource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;

import java.io.IOException;

@RestController
public class FileController {

    @Autowired
    private AmazonS3 amazonS3;

    // 替换为你的S3桶名称
    private static final String BUCKET_NAME = "your-s3-bucket-name";

    @GetMapping("/files/{filename}")
    public ResponseEntity<InputStreamResource> getVideoFile(@PathVariable String filename) throws IOException {
        S3Object s3Object = amazonS3.getObject(BUCKET_NAME, filename);
        InputStreamResource resource = new InputStreamResource(s3Object.getObjectContent());

        return ResponseEntity.ok()
                .contentType(MediaType.parseMediaType("video/mp4"))
                .header(HttpHeaders.CONTENT_DISPOSITION, "inline; filename=\"" + filename + "\"")
                .body(resource);
    }
}

2. 检查S3权限与AWS配置 #

• 确认S3桶权限：如果后端用IAM角色访问，需确保角色拥有该桶的读取权限；若文件非敏感内容，也可临时设置对象公开读权限测试（不推荐长期使用）。
• 配置AWS凭证：在Heroku环境变量中设置AWS_ACCESS_KEY_ID、AWS_SECRET_ACCESS_KEY、AWS_REGION，确保后端能正常连接S3。

3. 优化前端视频标签 #

• 移除多余格式的source标签：如果仅存MP4格式，删除webm相关标签，减少无效请求。
• 检查容器CSS：确保.video-container没有设置display: none等隐藏属性，避免视频无法渲染。

修改后的前端代码：

<div class="player">
    <video class="video-container" controls>
        <source th:src="@{/files/{filename}(filename=${product.imagePath})}" type="video/mp4"/>
        <p>你的浏览器不支持HTML5视频播放</p>
    </video>
    <div class="controls">
        <div class="progress">
            <div class="progress__filled"></div>
        </div>
        <button class="controls__btn playPauseBtn" title="播放/暂停">
            ►
        </button>
    </div>
</div>

4. 排查网络请求 #

打开浏览器开发者工具的网络面板，刷新页面后查看/files/xxx.mp4请求状态：

• 若为404：核对数据库存储的文件名与S3上的文件名是否一致，检查后端接口路径是否正确。
• 若为403：检查S3权限配置，确认后端AWS凭证拥有读取该桶的权限。
• 若为200但无法播放：直接在新标签页打开该URL，测试返回内容是否为有效MP4文件。

内容的提问来源于stack exchange，提问作者Radek0582