Grails/HTML：同じカルーセルで画像とビデオを表示

Question

私はAWS S3経由でWebアプリケーションにコンテンツをアップロードしています。同じカルーセルに画像と動画の両方を表示できません。

このコードは私のカルーセルナビゲータであり、実際に表示されている実際のフルサイズの画像です。

<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テストを変更する必要があります。

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