Question

我的网站上有多个需要播放的视频（）。当play（）返回一个Promise时，我使用Promise.all()创建了一个小脚本，因此每个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()兑现诺言，但是当我console.log(data)时，我在Chrome / Safar中得到了一个未定义2x的数组，而在Firefox中根本没有返回值（.none从未被调用？）。

这种诺言解决方式不适用于.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

您不能在下面做类似的事情吗？

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

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

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

play（）承诺无法解决

1 个答案: