Задать вопрос
  • Почему YouTube мешает Swiper?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Можно ли как то совместить эти события, чтобы и слайды листать, и кнопки в плеере нажимать?

    В том виде, в котором оно есть сейчас - нет. Проблема существует с 2013 года как минимум и будет решена примерно никогда, потому что обе стороны конфликта говорят, что проблема не на их стороне. Но можно вместо интерфейса от youtube прикрутить свой. То есть плеер оставить, но управление сделать свое, которое будет как-то сочетаться с имеющимся интерфейсом. Такой вот компромисс. Концептуально это будет выглядеть так, что мы убираем стандартный iframe, отключаем для плеера pointer-events:
    <div class='swiper' id='my-slider'>
        <div class='swiper-wrapper'>
            <div class='swiper-slide'>Slide 1</div>
            <div class='swiper-slide' id='youtube-slide'>
                <div id='player'></div>
            </div>
            <div class='swiper-slide'>Slide 3</div>
            <div class='swiper-slide'>Slide 4</div>
        </div>
    </div>
    <style>
    #player {
        pointer-events: none;
    }
    </style>

    И переходим к API на js, чтобы сформировать свой плеер, который мы будем контролировать:
    const youtubeScriptTag = document.createElement('script');
    youtubeScriptTag.src = 'https://www.youtube.com/iframe_api';
    document.body.appendChild(youtubeScriptTag);
    
    window.onYouTubeIframeAPIReady = () => {
        const player = new YT.Player('player', {
            videoId: 'orbr-C3gYKk',
            playerVars: {
                controls: 0
            },
            events: {
                onReady: (event) => {
                    const youtubeSlide = document.getElementById('youtube-slide');
                    let isVideoPlaying = false;
    
                    youtubeSlide.addEventListener('click', () => {
                        if (isVideoPlaying) {
                            event.target.stopVideo();
                        } else {
                            event.target.playVideo();
                        }
    
                        isVideoPlaying = !isVideoPlaying;
                    });
                }
            }
        });
    }
    
    const swiper = new Swiper('#my-slider', {});

    В playerVars можно передать всякие параметры и немного настроить внешний вид плеера (убрать лишнее). И можно все подвесить на события свайпера, чтобы запускать или останавливать видео при переходе на нужный слайд, ну или что там нужно по дизайну.

    P.S.: На CodePen метод playVideo может не работать в Chrome-подобных браузерах из-за особенностей работы песочницы, но на обычной странице все должно быть ок.
    Ответ написан
    2 комментария
  • Битрикс. Почему getPropertyCollection видит не все свойства?

    @Dropsen Автор вопроса
    учусь веб-разработке.
    Решение нашёл.
    Не знаю, возникнет ли у кого проблема такая, но план действий следующий:
    В новых версиях битрикса может быть глюк: в списке свойств заказа => привязка свойства => службы доставки не видно выделенных элементов. Нужно убедиться, что стоит всё, что нужно.
    Далее, привязка свойств и вызов товара должен быть ПОСЛЕ добавления отгрузки и $payment->setField('SUM', $order->getPrice()); (когда применяется этот метод, то произойдёт перестройка всех связанных объектов).

    После этих действий все свойства стали снова доступны.
    Ответ написан
    1 комментарий
  • Как при клике на поле «файл» на сайте с телефона включить его камеру, а не показывать файл-менеджер?

    SirD
    @SirD Автор вопроса
    Вот что нашел на StackOverflow:

    Here is the code to get access to the new camera api's in android 3+ and iOS 6.
    <input type="file" accept="image/*" capture="camera">
    This will allow you to take a new picture or select one from the device library and then upload it to a web app.

    До телефона с андроидом выше 3 версии доберусь через пару часов.
    На 2.1 не работает.
    Ответ написан
    3 комментария