1

Друзья , создал видео слайдер c миниатюрами, добавил видео свойство autoplay видео файлы воспроизводятся все вместе, как сделать чтобы они воспроизводились только тогда когда я нажму на соответственную миниатюру ?

 <div id="slides">
                <div id="overflow">
                    <div class="inner">
                        <div class="page">
                            <video src="videos/1.mp4" preload="metadata" autoplay controls></video>
                        </div>
                        <div class="page">
                            <img src="images/4.gif">
                        </div>
                        <div class="page">
                            <video src="videos/3.mp4" preload="metadata"  controls></video>
                        </div>
                        <div class="page">
                            <video src="videos/1.mp4" preload="metadata"   controls></video>
                        </div>
                    </div> <!--inner-->
                </div> <!--overflow-->
            </div> <!--slides-->

            <div id="active">
                <label for="slide1">
                    <video src="videos/1.mp4"></video>
                </label>
                <label for="slide2">
                    <img src="images/2.jpg"/>
                </label>
                <label for="slide3">
                    <video src="videos/3.mp4"></video>
                </label>
                <label for="slide4">
                    <video src="videos/1.mp4"></video>
                </label>
            </div>
        </div>

CSS

#slider{
    position: relative;
    width:424px;
    height: 298px;
    left:140px;
    top:135px;
    margin: 0;
    cursor: pointer;
    padding:0;
}
#slides{
    width: 424px;
    height: 298px;
}
.inner{
    width:400%;
}
#slide1:checked ~ #slides .inner { margin-left:0;}
#slide2:checked ~ #slides .inner { margin-left:-100%;}
#slide3:checked ~ #slides .inner { margin-left:-200%;}
#slide4:checked ~ #slides .inner { margin-left:-300%;}
#slide5:checked ~ #slides .inner { margin-left:-400%;}
.page{
    float:left;
    width:25%;
}
.page video{
    width:424px;
    height: 298px;
}
#overflow{
    overflow: hidden;
}
#slider input{
    display: none;
}
#active label video {
    width:97px;
    height: 68px;
    display: inline-block;
    cursor: pointer;
    margin-top:10px;
    margin-left:3px;
}
label video:focus{
    border: 3px solid white;

}

#slide1:checked ~ #active label:nth-child(1),
#slide2:checked ~ #active label:nth-child(2),
#slide3:checked ~ #active label:nth-child(3),
#slide4:checked ~ #active label:nth-child(4){
        background: #383838
}
#slides .inner{
    -webkit-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

1 ответ 1

2

Удаляем autoplay во всех видео. Далее прописываем событие click при котором будет воспроизводиться видео.

jQuery(document).ready(function($) {
    $('#slider video').click(function() {
        this.paused ? this.play() : this.pause();
    });
});

На чистом javascript. Конкретно для вашего кода:

var labels = document.querySelectorAll('#active label');
for (var i = 0; i < labels.length; i++) {

  labels[i].addEventListener('click', function(event) {
    var videos = document.querySelectorAll('#slides video');
    var index = this.getAttribute('for').replace('slide', '');
    var currentVideo = videos[index-1];

    for (var p = 0; p < videos.length; p++) {
      videos[p].pause();
      videos[p].currentTime = 0;
    }

    currentVideo.play();
  });

}

Рабочий пример: https://jsfiddle.net/monobit/8y0tozah/


UPD

Для варианта с видео и фото в одном слайдере: https://jsfiddle.net/monobit/8y0tozah/2/

7
  • это на Jquery , а как будет на чистом Javascript
    – Anton
    21 авг 2017 в 11:58
  • @Anton, обновил ответ и добавил решение на чистом js именно для вашего кода
    – Dmitry B.
    21 авг 2017 в 13:01
  • обновил вопрос , если вместо второй миниатюры поставить изображение с расширением .gif , и в главном слайде поставить оригинал этого изображения, то путается местами воспроизведение видео , типа если нажимаю на миниатюру (2) то воспроизводится звук из видео миниатюры(3) , а 4 видео вообще не воспроизводит
    – Anton
    22 авг 2017 в 6:19
  • @Anton, обновил ответ. В самом конце добавил ссылку на вариант когда в слайдере есть и видео, и картинки.
    – Dmitry B.
    22 авг 2017 в 8:59
  • 1
    @Anton, это я не ту ссылку вставил :) Вот jsfiddle.net/monobit/8y0tozah/2
    – Dmitry B.
    22 авг 2017 в 9:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.