Блог

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

Более сложная часть: если пользователь нажимает на одно из видео, остальные видео должны автоматически загружаться и автозапускаться до последнего видео. У меня это (почти) тоже работает (но, возможно, я делаю это не лучшим образом).

А теперь самая сложная часть для меня и мой вопрос: как я могу остановить последнее видео и не запускать при завершении прослушивателя событий?

Вот ручка для codepen, над которой я работал: https://codepen.io/mginter/pen/LvMmjK

Я пробовал разветвлять логику несколькими способами. Я также пытался использовать метод destroy и перестроить метод iframe (но я не могу заставить новый iframe отображаться и вставляться в вакансию, оставленную методом destroy).

Я подумал, что если бы я поместил newPlayer.on(‘ended’, function() {}); в отдельную функцию, то я мог бы предотвратить его запуск, но НЕТ! Это прослушиватель событий, и не имеет значения, где он находится в коде. Я пытался отключить прослушиватель событий с помощью метода newPlayer.off(); , но, видимо, я делаю это неправильно. У кого-нибудь есть какие-либо предложения?? Я занимаюсь этим уже три дня, но пока безуспешно.

 

// Query All Needed Elements
var overlay = document.querySelector("#videomodal");
var iframePlayer = document.querySelector(".iframe-respwrap");
var videoIframe = document.querySelector(".iframe-respwrap iframe");
var newPlayer = new Vimeo.Player(videoIframe);
// Expose the Source Attribute of the iframe
var iframeSrcAtt = videoIframe.src;
// console.log("Iframe Source: "   iframeSrcAtt);

// Get all of the links
var allItems = document.querySelectorAll('.lightbox a');
console.log(allItems   " - Total (NodeList) Length: "   (allItems.length));
// Get source of Last Item in Array
const finalVideoSrc = allItems[allItems.length-1].children[0].dataset.vidsrc;

// Open/Close overlay
function toggleOverlay(state) { overlay.classList.toggle('video-on'); }
function closeOverlay(e) {
    overlay.classList.toggle('video-on');
    newPlayer.pause().then(function() {newPlayer.unload();}).catch(function(error) { console.log(error); });
}
overlay.addEventListener('click', closeOverlay, false);

// Get initial clicked item source and number
function clickedItem(e) {
    e.preventDefault();
    let clickedSource = e.target.dataset.vidsrc;
    let clickedNumber = parseInt(e.target.parentNode.dataset.number, 10);
    startVidLoop(clickedSource, clickedNumber);
}

// ------------------------------------------
// START HERE!!   Add Event listener to each link
var z;
for (z=0; z < allItems.length; z  ) {
    // console.log(allItems[z].children[0].dataset.vidsrc);
    allItems[z].addEventListener('click', clickedItem, false);
    allItems[z].addEventListener('click', toggleOverlay, false);
}

function startVidLoop(vidSrc, vidNumber) {
    if (vidSrc == finalVideoSrc) {
        console.log("Incoming: "  vidSrc   ", Equals Final Video in List: "   finalVideoSrc);
        newPlayer.loadVideo(vidSrc).then(function(src) {console.log("END! "   src); newPlayer.play(src);}).catch(function(error) {console.log(error);});
        newPlayer.off();
        return;
    } else {
        let nextNumber = vidNumber   1;
        let comingUp = allItems[nextNumber].children[0].dataset.vidsrc;
        console.log("Playing Now: " vidNumber " - " vidSrc); console.log("Coming Up: " nextNumber " - " comingUp);
        newPlayer.loadVideo(vidSrc).then(function(src) {playVideo(src,comingUp,nextNumber);}).catch(function(error) {console.log(error);});
    }
}

function playVideo(vimeoSource,nextVid,nextNumber) {
    console.log("Play: "   vimeoSource   " Next: "   nextVid);
    newPlayer.play(vimeoSource);
    if (nextVid == finalVideoSrc) {
        console.log("Last Video is Next!");
        nextVid = finalVideoSrc;
    }
    newPlayer.on('ended', function go(data) {
        startVidLoop(nextVid, nextNumber)
    });
}