Question

我有一个图片库，可将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)
    });
}

Vimeo player.js-无法停止“结束”监听器上的最后一个视频触发

0 个答案: