Question

下面是我的皇家滑块代码。此滑块仅显示图像。我想在这个皇家滑块上添加视频。我试过并且谷歌但不能很好地解决这类问题。我该怎么做？谢谢。

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>

Answer 2

        <div id="full-width-slider">

            <div class="rsContent" data="royalSlider">
                <div>
                    <img class="rsImg" src="image.jpg" data-rsVideo="https://vimeo.com/44878206" />
                </div>
            </div>
        </div>


<script>
    // start video autoplay
    jQuery(document).ready(function ($)
    {
        $('#full-width-slider').data('royalSlider').playVideo();
    });
</script>

在皇家滑块中添加视频

2 个答案: