java - 使用 Spring 和 Thymeleaf 嵌入具有精确时间的 YouTube 视频

Question

当我尝试使用 Spring 和 Thymeleaf 在 Java 项目中嵌入具有准确时间的 YouTube 视频时遇到问题。

1/工作场景:当我尝试嵌入普通的 YouTube 视频时，它可以工作:
在 Controller 中我有这个:article.setVideo(视频);其中 video 是 YouTube 视频的结束字符串:

示例视频链接:https://www.youtube.com/embed/s39mNwFuQDQ这里video的值将是:s39mNwFuQDQ

现在在 html Thymeleaf View 中我有: html Thymeleaf view

<iframe width="560" height="315" th:src="@{https://www.youtube.com/embed/{url} (url=${article.video})}"   frameborder="0" alt="no video attached" allowfullscreen="1"></iframe>

它获取保存的视频字符串，将其连接到 https://www.youtube.com/embed/ 并且工作正常。

2/非工作场景:当我尝试做同样的事情，但使用具有精确时间的 YouTube 视频时 – 它不起作用:

在 Controller 中我有这个:

article.setVideo(video + "?start="+ extOptions);

地点:

视频 - 是一个字符串；extOptions 是一个字符串。

结果我得到一个字符串

示例:https://www.youtube.com/embed/s39mNwFuQDQ?start=212视频是 - s39mNwFuQDQextOptions 是 - 212

现在在article.getVideo()中我有:s39mNwFuQDQ?start=212 - 这很好地保存在数据库中。

在 Thymeleaf html View 中我仍然有相同的代码。不幸的是，我的视频此时没有在浏览器中显示(尝试了不同的浏览器)。

当我尝试像这样精确显示视频时:

<iframe width="560" height="315" th:src="@{https://www.youtube.com/embed/s39mNwFuQDQ?start=212}" frameborder="0" alt="no video attached" allowfullscreen="1">

它正在工作并且视频显示并从 212 秒开始。

这里可能出现什么问题？

我尝试了一些转义？标记，一些模式引用(正则表达式转义) - 但这没有帮助，这些只会用不需要的字符填充字符串。

有什么想法可以解决这个问题吗？

Answer 1

Thymeleaf 正在转义问号(在本例中应该如此)。如果您查看源代码，您会发现它将 ? 替换为 %3F。您应该这样做的方法是将开头保留在不同的变量中，并像这样构建 url:

th:src="@{https://www.youtube.com/embed/{url} (url=${article.video}, start=${article.start})}"

如果这不是一个选项，您可以将网址创建为字符串，但这样您就会面临某些攻击(如果您可以接收不受信任的视频网址输入)。

th:src="${'https://www.youtube.com/embed/' + url}"

<小时/>

回答编辑 - 如果 Controller 选项设置如下:

article.setVideo(video);           // example: video equals: s39mNwFuQDQ
article.setVideoLink(extOptions);  // example: extOptions equals: 212

Thymeleaf 的完整语法是:

<!-- Generated url: https://www.youtube.com/embed/s39mNwFuQDQ?start=212 -->
<iframe width="560" height="315" th:src="@{https://www.youtube.com/embed/{url}(url=${article.video}, start=${article.videoLink})}" frameborder="1" alt="no video attached" allowfullscreen="0"></iframe>