Question

我正在通过AWS S3将内容上传到我的网络应用程序，而我在同一个轮播中显示图像和视频时遇到了问题。

下面的代码是我的轮播导航器，下面是显示的实际全尺寸图像。

<div class="content">

            <div class="slider-nav">
                <g:each in="${event.contents}" var="content">
                    <img height = "50px" class = "event-content" src = "${content.url}" />
                </g:each>
            </div>

            <div class="content-holder">
                <div class="slider-for">

                    <g:each in="${event.contents}" var="content">
                        <img class = "event-content" src = "${content.url}" />
                    </g:each>
                </div>
            </div>
        </div

正如您所看到的，它正在迭代我的内容表并将图像src设置为那里找到的url。我希望在同一个转盘中同时拥有图像和视频，但我无法弄清楚如何这样做。

感谢任何帮助或其他想法。

Answer 1

如下所示。如果您要向mp4显示其他视频格式，则必须更改g：if test。

    <g:each in="${event.contents}" var="content">
        <g:if test="${content.url.endsWith('.mp4')}">
            <video controls>
                <source src="${content.url}" type="video/mp4">
            </video>
        </g:if>
        <g:else>
            <img src="${content.url}" />
        </g:else>
        <br>
    </g:each>

Grails / HTML：在同一个轮播中显示图像和视频

1 个答案: