Vimeo player.js - не могу остановить запуск последнего видео на «завершенном» слушателе - PullRequest
Новая
       20

Vimeo player.js - не могу остановить запуск последнего видео на «завершенном» слушателе

1 голос
/ 25 апреля 2019

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

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

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

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

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

Я подумал, если я завернуnewPlayer.on ('окончен', 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)
    });
}
...