0

我正在使用 barba.js 通过 GSAP 创建平滑的页面转换。最初我在重新初始化我的 jS 时遇到了问题，但现在可以正常工作（已调试）。但是，我对 html5 视频有疑问-单击缩略图会以视频模式打开视频的全屏版本，在干净的页面加载时，这不会自动播放，并且具有链接到我自己的 jS 文件的自定义控件-默认控件是隐藏的。

出于某种原因，当我使用 PJAX 切换页面并重新加载页面时，会显示默认控件，并且我的自定义视频播放器控件不再控制有问题的视频。奇怪的是他们仍然播放音频，但视频看起来被启用了控件的原始文件覆盖，我可以同时播放两个视频并听到两个视频，但只能看到一个视频。

基本上，PJAX 和 html5 视频之间似乎不兼容，这是我的 barba.js，它控制 PJAX 转换（注意我测试过的脚本的重新初始化并且可以工作）：

barba.init({

    transitions: [{
        name: 'diffuse-transition',
        leave(data) {
            return gsap.to(data.current.container, {
                opacity: 0
            });
        },

        beforeEnter: ({ next }) => {
            window.scrollTo(0, 0);
            reinitScripts();
        },

        enter(data) {
            return gsap.from(data.next.container, {
                opacity: 0
            });
        }
    }]
});

然后是模态的html：

<div id="modalVideoWrapper">
            <div id="modalVideo">
                <div id="modalVideoInner">
                    <video id="modalVideoInteract" src="clients/moo/video/MOO_Advert_Render_v2_2.mp4" preload="auto"
                        poster="clients/moo/images/MOO_Video_Placeholder.jpg" class="projectFeedVideo"></video>
                    <div id="controls">
                        <div id="progressBar"><span id="progress"></span></div>
                        <button id="playpause" title="play" onclick="togglePlayPause()">Play</button>
                    </div>
                    <img class="close-modal" alt="Close" src="assets/icons/icon_close_modal.png" />
                </div>
            </div>
        </div>

然后视频模式 jS 可以完美地在整个页面重新加载时运行，而不是通过 PJAX：

/* Set Globals */
var video = document.getElementById("modalVideoInteract");
/* End Set Globals */
/* Trigger Video Modal */
$(".pF1-Right video, #projectIntro .watchVideo").click(function () {
   $("body").addClass("lock-scroll");
   $("#modalVideoWrapper").fadeTo("slow", 1);
});

$(".close-modal").click(function () {
   video.pause();
   $('#modalVideoInteract').get(0).currentTime = 0.3;
   $("#modalVideoWrapper").fadeOut("300", 0);
   $("body").removeClass("lock-scroll");
});

$("#modalVideoInteract").click(function () {
   $("#playpause").click();
});
/* End Trigger Video Modal */
/* Custom Controls */
video.controls = false;

function togglePlayPause() {
   var playpause = document.getElementById("playpause");
   if (video.paused || video.ended) {
      playpause.title = "Pause Video";
      playpause.innerHTML = "Pause";
      video.play();
   }
   else {
      playpause.title = "Play Video";
      playpause.innerHTML = "Play";
      video.pause();
   }
}

function updateProgress() {
   var progress = document.getElementById("progress");
   var value = 0;
   if (video.currentTime > 0) {
      value = Math.floor((100 / video.duration) * video.currentTime);
   }
   progress.style.width = value + "%";
}

video.addEventListener("timeupdate", updateProgress, false);

video.addEventListener('play', function () {
   var playpause = document.getElementById("playpause");
   playpause.title = "Pause Video";
   playpause.innerHTML = "Pause";
}, false);
video.addEventListener('pause', function () {
   var playpause = document.getElementById("playpause");
   playpause.title = "Play Video";
   playpause.innerHTML = "Play";
}, false);

video.addEventListener('ended', function () {
   this.pause();
   playpause.title = "Play Again";
   playpause.innerHTML = "Play Again";
}, false);
/* End Custom Controls */

我在这里想念什么？

4

1 回答 1

1

解决了，奇怪的是页面的几个部分需要删除，以便它们能够正确重新初始化，所以我将它添加到 barba 转换 jS：

barba.init({

    transitions: [{
        name: 'diffuse-transition',

        leave(data) {
            return gsap.to(data.current.container, {
                opacity: 0
            });
        },

        beforeEnter: ({ next }) => {
            window.scrollTo(0, 0);
            reinitTitleScene();
            reinitScripts();
        },

        enter(data) {
            return gsap.from(data.next.container, {
                opacity: 0
            });
        },

        afterLeave() {
            reinitModal();
        }
    }]
});

    function reinitTitleScene() {
        $('#titleScene').remove();
    }
    
    function reinitModal() {
        $('#modalVideoInteract').remove();
    }

希望这可以帮助有需要的人:)

于 2020-11-19T23:52:53.160 回答