Установить «активный» класс для текущего элемента слайдера - PullRequest
Новая
       0

Установить «активный» класс для текущего элемента слайдера

0 голосов
/ 19 сентября 2019

Я пытаюсь сделать слайдер из 6 видео (одинаковой ширины для всего этого) исключительно для просмотра на мобильном телефоне.И когда я фокусируюсь на видео, оно должно начинаться и автоматически увеличиваться.

Моя проблема в том, что я не знаю, как определить, какой слайд отображается для запуска видео на этом слайде.

Я думал, что есть какая-то функция для определения положения слайдера, но никого не нашел.Я думал о получении средней текущей координаты ползунка, но не могу узнать, как ее получить 

<body>
    <div class="example-wrapper">
        <div class="container both-scroll both-mandatory align-center">
            <div class="wrapper">
                <div class="empty"></div>
                <div class="element">
                    <video width="" height="" controls>
                        <source src="https://storage.coverr.co/videos/coverr-subway-arriving-1567246574152?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTY4ODg3OTI4fQ.bwTlDESkfV9tTHITf4WqKvEs3MIOlfik0bw3fX3huuo" type="video/mp4">
                        <source src="https://storage.coverr.co/videos/coverr-subway-arriving-1567246574152?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTY4ODg3OTI4fQ.bwTlDESkfV9tTHITf4WqKvEs3MIOlfik0bw3fX3huuo" type="video/ogg">
                        Your browser does not support the video tag.
                    </video>
                </div>
                <div class="element">
                    <video width="" height="" controls>
                        <source src="https://storage.coverr.co/videos/coverr-subway-arriving-1567246574152?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTY4ODg3OTI4fQ.bwTlDESkfV9tTHITf4WqKvEs3MIOlfik0bw3fX3huuo" type="video/mp4">
                        <source src="https://storage.coverr.co/videos/coverr-subway-arriving-1567246574152?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTY4ODg3OTI4fQ.bwTlDESkfV9tTHITf4WqKvEs3MIOlfik0bw3fX3huuo" type="video/ogg">
                        Your browser does not support the video tag.
                    </video>
                </div>
                <div class="element">
                    <video width="" height="" controls>
                        <source src="https://storage.coverr.co/videos/coverr-subway-arriving-1567246574152?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTY4ODg3OTI4fQ.bwTlDESkfV9tTHITf4WqKvEs3MIOlfik0bw3fX3huuo" type="video/mp4">
                        <source src="https://storage.coverr.co/videos/coverr-subway-arriving-1567246574152?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTY4ODg3OTI4fQ.bwTlDESkfV9tTHITf4WqKvEs3MIOlfik0bw3fX3huuo" type="video/ogg">
                        Your browser does not support the video tag.
                    </video>
                </div>
                <div class="element">
                    <video width="" height="" controls>
                        <source src="https://storage.coverr.co/videos/coverr-subway-arriving-1567246574152?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTY4ODg3OTI4fQ.bwTlDESkfV9tTHITf4WqKvEs3MIOlfik0bw3fX3huuo" type="video/mp4">
                        <source src="https://storage.coverr.co/videos/coverr-subway-arriving-1567246574152?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTY4ODg3OTI4fQ.bwTlDESkfV9tTHITf4WqKvEs3MIOlfik0bw3fX3huuo" type="video/ogg">
                        Your browser does not support the video tag.
                    </video>
                </div>
                <div class="element">
                    <video width="" height="" controls>
                        <source src="https://storage.coverr.co/videos/coverr-subway-arriving-1567246574152?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTY4ODg3OTI4fQ.bwTlDESkfV9tTHITf4WqKvEs3MIOlfik0bw3fX3huuo" type="video/mp4">
                        <source src="https://storage.coverr.co/videos/coverr-subway-arriving-1567246574152?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTY4ODg3OTI4fQ.bwTlDESkfV9tTHITf4WqKvEs3MIOlfik0bw3fX3huuo" type="video/ogg">
                        Your browser does not support the video tag.
                    </video>
                </div>
                <div class="element">
                    <video width="" height="" controls>
                        <source src="https://storage.coverr.co/videos/coverr-subway-arriving-1567246574152?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTY4ODg3OTI4fQ.bwTlDESkfV9tTHITf4WqKvEs3MIOlfik0bw3fX3huuo" type="video/mp4">
                        <source src="https://storage.coverr.co/videos/coverr-subway-arriving-1567246574152?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTY4ODg3OTI4fQ.bwTlDESkfV9tTHITf4WqKvEs3MIOlfik0bw3fX3huuo" type="video/ogg">
                        Your browser does not support the video tag.
                    </video>
                </div>
                <div class="empty"></div>
            </div>
        </div>
    </div>
</body>


<style>
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }
    video{
        width: 50vw;
    }

    .align-center .element {
        scroll-snap-align: center;
    }

    .example-wrapper {
        text-align: center;
        width: 350vw;
        margin-left: auto;
        margin-right: auto;
    }

    .container {
        width: 100%;
        height: 60vh;
        margin-left: auto;
        margin-right: auto;
        overflow: auto;
        position: relative;

        -webkit-overflow-scrolling: touch;
        scroll-snap-type: mandatory;
    }

    .element {
        height: 60vh;
        scroll-snap-stop: normal;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .both-mandatory {
        scroll-snap-type: both mandatory;
    }

    .both-scroll .wrapper {
        width: 50vw;
        height: 100%;
        display: grid;
        grid-template-columns: 25vw 50vw 50vw 50vw 50vw 50vw 50vw 25vw;
        grid-gap: 10px;
    }


</style>

Я ожидаю , чтобы определить, какое видео отображается в центре экрана для добавленияЭто класс (активный).

Спасибо за вашу руку помощи

1 Ответ

0 голосов
/ 19 сентября 2019

Вы можете прослушать событие play тега video ([Подробнее]) 1 

$("video").on("play", function(){
   $(this).addClass("active");
}

И в случае удаления активного, когда видеозакончено: 

$("video").on("ended", function(){
   $(this).removeClass("active");
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...