javascript - play() promise 未解决

Question

我的网站上有多个视频需要播放()。当 play() 返回一个 Promise 时，我使用 Promise.all() 创建了一个小脚本，因此每个 Promise 都会等待其他 Promise。

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() 能够解决我的 promise ，但是当我 console.log(data) 时，我在 Chrome/Safar 中得到一个未定义的数组，并且在 Firefox 中根本没有 return(.then 从未被调用？)。

这种 promise 解析不适用于 .play() 还是我做错了？

编辑 1

刚刚注意到，在 Chrome/Safari 中，视频播放实际上已开始，即使 promise 尚未解决。在 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 已经解决了 promise ，而 Firefox(和 IE/EdgeHTML)还没有。

Answer 1

你能不能不要做下面这样的事情？

隐式返回应该为您解析 promise ，然后您可以使用传入的 playVideo() 方法返回 videos 。

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

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