обещание play () не разрешается - PullRequest
Новая
       5

обещание play () не разрешается

1 голос
/ 22 января 2020

У меня на сайте несколько видео, которые мне нужно воспроизвести (). Так как 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) получу массив с 2x неопределенным в Chrome / Safar и никакого возврата (.then никогда не вызывается?) Вообще в Firefox.

Разрешает ли такое разрешение обещание с .play () или я допустил ошибку?

РЕДАКТИРОВАТЬ 1

Только что заметил что в Chrome / Safari воспроизведение видео фактически начинается, хотя обещание не выполнено. В firefox воспроизведение не начинается.

РЕДАКТИРОВАТЬ 2

Пытался реализовать решение Джо sh Келли следующим образом:

Создал отдельную функцию с именем 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 / Edge HTML) не имеют.

1 Ответ

0 голосов
/ 22 января 2020

Разве вы не можете сделать что-то подобное ниже?

неявный возврат должен разрешить обещание для вас, а затем вы можете вернуть videos с помощью переданного метода playVideo(). 

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

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