2017-04-25 72 views
-1

我通过AWS S3将内容上传到我的网络应用程序,并且无法在同一个轮播中显示图像和视频。Grails/HTML:在同一轮播中显示图像和视频

下面的代码是我的传送带导航器,下面是显示的实际全尺寸图像。

<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设置为在其中找到的网址。我想要将图像和视频放在同一个轮播中,但我无法弄清楚如何操作。

赞赏任何帮助或替代想法。

+0

那么,你有什么上面的作品,但你想添加视频到混合?视频来自哪里? –

+0

是的,视频来自AWS上的同一个存储分区。每个事件都会创建一个存储桶子目录,每个事件都会包含所有的内容 –

+0

因此,基本上我希望某种if语句来检查它是否为

回答

0

下面的情况如何。如果您要向mp4显示其他视频格式,则必须更改g:if测试。

<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> 
+0

完美。谢谢 –

相关问题