javascript - 在皇家 slider 中添加视频

Question

下面是我的皇家 slider 代码。此 slider 仅显示图像。我想在这个皇家 slider 上添加视频。我试过了，也用谷歌搜索，但无法解决这种类型的解决方案。我该怎么做？谢谢。

HTML:

    <div class="slideholder">
       <div class="royalSlider rsDefault">
          <div class="rsContent">
               <img class="rsImg" src="img/1.jpg"  />
          </div>
         <div class="rsContent">
               <img class="rsImg" src="img/2.jpg" />
         </div>
         <div class="rsContent">
               <img class="rsImg" src="img/3.jpg" />
         </div>
       </div>   
   </div>

CSS:

    .royalSlider{
         margin:0 auto;
         max-width:600px;
         width:auto;
    }

JavaScript:

   <script>
       jQuery(document).ready(function($) {
            $(".royalSlider").royalSlider({
                     transitionType:'move',
                     imageScaleMode: 'fill',
         autoScaleSlider:true,
         autoScaleSliderWidth:100+'%',
         autoScaleSliderHeight:'auto',
         autoHeight:true
             });  
        });
  </script>

Answer 1

尝试像下面的代码一样将视频添加到 div

<div class="slideholder">
    <div class="royalSlider rsDefault">
        <div class="rsContent">
            <img class="rsImg" src="img/1.jpg"  />
        </div>
        <div class="rsContent">
            <img class="rsImg" src="img/2.jpg" />
        </div>
        <div class="rsContent">
            <video controls>
                <source src="img/4.mp4" type="video/mp4">
                <source src="img/4.ogg" type="video/ogg">
                Your browser does not support the video tag.
            </video>
        </div>
    </div>   
</div>