Добавить видео в королевский слайдер

0

Ниже приведен мой королевский слайдер. Этот слайдер показывает только изображения. Я хочу добавить видео на этот королевский слайдер. Я попробовал, а также Google, но не могу это решить. Как мне это сделать? Спасибо.

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>
  • 0
    Что за видео? Вы пробовали новый тег HTML5 video ?
  • 0
    .mp4 видео типа я попробовал. Да, я пробую тег <embed>, а также этот тег <video> <source /> </ video>. Но это не воркинг.
Показать ещё 1 комментарий
Теги:
slider

2 ответа

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню