播放（）承諾沒有解決

Question

我的網站上有多個視頻需要播放 ()。 當 play() 返回一個承諾時，我使用Promise.all()創建了一個小腳本，因此每個承諾都在等待其他承諾。

try {
    var fn = function playVideo(element) {
        var newPromise = element.play();
        console.log('PROMISE', newPromise); // promise is returned (but not yet resolved)
        return newPromise;
    };

    var promise = this.videos.map(fn);
    var results = Promise.all(promise); // all promises should resolve

    results.then(data =>
        console.log('DATA', data)
    ), (err => {
        console.log('error', err);
    });
}
catch(err) {
    console.log('err', err);
}

this.videos是我定義的一系列視頻：

var getVideos = document.querySelectorAll('.project__video .video-js');

if(getVideos.length === 0) {
    return;
}

Array.from(getVideos).forEach((element) => {
    try {
        const autoplay = !element.classList.contains('video-nonplay');
        const controls = !autoplay;
        const muted = autoplay;
        const loop = autoplay;

        const video = window.videojs(element, {
            controls,
            autoplay: false,
            preload: 'none',
            muted,
            fluid: true,
            playsinline: true,
            loop
        });

        if (autoplay) {
            this.videos.push(video);
        }
    }
    catch(err) {
        console.log('error while initiating video!', err);
    }
});

我希望Promise.all()能夠解決我的承諾，但是當我使用console.log(data)時，我在 Chrome/Safar 中得到一個 2x undefined 的數組，並且在 Firefox 中根本沒有返回（.then 永遠不會被調用？）。

這種承諾解決不適用於 .play() 還是我做錯了？

編輯 1

剛剛注意到，在 Chrome/Safari 中，視頻播放實際上已經開始，即使承諾沒有得到解決。 在 Firefox 中，播放不會開始。

編輯 2

試圖實施 Josh Kelly 的解決方案如下：

創建了一個名為playVideos的單獨函數

playVideos(videos) {
    try {
        const playVideo = (el) => el.play();
        return videos.map(playVideo);
    } catch(err) {
        console.log('err', err);
    }
}

我這樣稱呼它

var vids = this.playVideos(this.videos);
console.log('returned vids', vids);

在控制台日志中，我可以看到 chrome 已經解決了承諾，而 firefox（和 IE/EdgeHTML）還沒有。

Answer 1

你不能在下面做這樣的事情嗎？

隱式返回應該為您解決承諾，然后您可以使用傳入的playVideo()方法返回videos 。

try {
  const playVideo = (el) => el.play()

  return this.videos.map(playVideo)
} catch(err) {
  console.log('err', err);
}