обещание воспроизведения видео запаздывает по клику указателя

Question

Я создаю функциональность, в которой у меня есть несколько указателей, которые последовательно создаются в виде круга (похожего на часы) один за другим, для каждого указателя определяется источник видео. При щелчке любого из этих указателей источник видео, связанный с этим указателем, будет загружен в тег видео. Есть два видео тега с идентификаторами видео-четного и видео-нечетного.

Например, если связанное с указателем клика видео загружается в элемент четного видео, то следующее следующее видео указателя будет предварительно загружено в нечетный элемент видео, но как скрытый. Если воспроизведение видео в элементе video-even заканчивается, то следующее видео-указатель, которое было предварительно загружено в элемент video-odd, будет запрограммировано нажато и начнет воспроизводиться и станет видимым. Элемент video-even будет скрыт и он предварительно загрузит следующий указатель видео в своем элементе.

Как правило, один видеоэлемент можно просматривать одновременно.

                         <div id="video-even" class="vid-even video-track">
                            <video playsinline="" muted="" id="video-container-even" preload="metadata" class="bg-video no-display"
                                src="a.mp4">

                            </video>
                        </div>
                        <div id="video-odd" class="vid-odd video-track">
                            <video playsinline="" muted="" id="video-container-odd" preload="metadata" class="bg-video no-display"
                                src="b.mp4">

                            </video>
                        </div>

** проблема **

Для мобильных устройств видео приостанавливается в первый раз, и пользователь должен щелкнуть вручную (не программно) на указателе, чтобы воспроизвести их. Поэтому я написал обещание, которое впервые остановит видео на мобильном телефоне. Но видео зависают из-за кода, который был написан в блоке catch. Пожалуйста, помогите мне найти, что пошло не так в этом коде

    function playPromiseForMobileVideo(videoElement) {
    var playPromise = videoElement.play();
    if (playPromise !== undefined) {
        playPromise.then(
            function () {
                if (currentDevice == 'mobile' && mobileFirstTime) {
                    videoElement.pause();
                    mobileFirstTime = false;
                }
            }).catch(function(e) {
                    var index = $('#hotspot-pointer').attr('data-current-index') * 15;
                    videoElement.src = $('#dash-click-' + index).attr('data-video-src');
                    playPromiseForMobileVideo(videoElement);
            });
    }
}

Объяснение блока захвата

Когда пользователь щелкает указатель, индекс, связанный с этим указателем, будет сохранен в элементе с идентификатором hotspot-указателя, с помощью которого мы можем найти элемент с видео-URL, чтобы загрузить его в элемент видео. Блок catch записывается потому, что если какое-то время пользователь слишком быстро нажимает на случайные указатели один за другим, тогда блоки видео, пауза и ошибка появляются из блока catch.

Примечание

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