title: play() promise doesn't resolve
body: <p>I have multiple videos on my site which I need to play().
  As play() returns a promise I created a little script using <code>Promise.all()</code>, so each promise waits for the others.</p>
  
  <pre><code>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 =&gt;
          console.log('DATA', data)
      ), (err =&gt; {
          console.log('error', err);
      });
  }
  catch(err) {
      console.log('err', err);
  }
  </code></pre>
  
  <p><code>this.videos</code> is an array of videos which I define like this:</p>
  
  <pre><code>var getVideos = document.querySelectorAll('.project__video .video-js');
  
  if(getVideos.length === 0) {
      return;
  }
  
  Array.from(getVideos).forEach((element) =&gt; {
      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);
      }
  });
  </code></pre>
  
  <p>I expected <code>Promise.all()</code> to resolve my promises but instead when I <code>console.log(data)</code> I get an array with 2x undefined in Chrome/Safar and no return (.then is never called?) at all in Firefox.</p>
  
  <p>Does this kind of promise resolving not work with .play() or have I done a mistake?</p>
  
  <p><strong>EDIT 1</strong></p>
  
  <p>Just noticed, that in Chrome/Safari the video playback is actually started, even though the promise is not resolved. In firefox the playback doesn't start.</p>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>Tried to implement solution of Josh Kelly as follow:</p>
  
  <p>Created a separate function called <code>playVideos</code></p>
  
  <pre><code>playVideos(videos) {
      try {
          const playVideo = (el) =&gt; el.play();
          return videos.map(playVideo);
      } catch(err) {
          console.log('err', err);
      }
  }
  </code></pre>
  
  <p>I call it like this</p>
  
  <pre><code>var vids = this.playVideos(this.videos);
  console.log('returned vids', vids);
  </code></pre>
  
  <p>in the console log I can see that chrome has resolved the promise while firefox (and IE/EdgeHTML) have not.</p>