视频播放承诺在点击鼠标指针时落后于视频

Question

我正在创建一个功能，其中有一些指针，它们一个接一个地一个圆圈（类似于时钟）依次创建，在每个指针上定义了一个视频源。单击任何这些指针后，与该特定指针关联的视频源将加载到video标签中。有两个视频标签，其ID为video-even和video-odd。

例如，如果与视频相关联的单击的指针视频加载在video-even元素中，则下一个即将到来的指针视频将被预加载在video-odd元素中，但被隐藏。如果在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);
            });
    }
}

捕获块说明

当用户单击指针时，与该指针关联的索引将存储在ID为hotspot-pointer的元素中，使用该元素我们可以找到具有视频URL的元素以将其加载到video元素中。之所以编写catch块，是因为如果一段时间后用户一次又一次地单击随机指针，则视频块以及暂停和错误都来自catch块。

注意

第一次会按语法单击鼠标指针，然后用户可以从手动单击开始，但是随着视频结束，会按语法单击播放下一个视频。