search

adrienjoly / playemjs

▶️ Streams a list of tracks from Youtube, Soundcloud, Vimeo...
https://www.npmjs.com/package/playemjs
MIT License
94 stars 18 forks source link

BUG: Make sure that next track will start playing, even when page is not active (background) #15

Open adrienjoly opened 6 years ago

adrienjoly commented 6 years ago

PlayemJS is a web/js component to play a sequence of tracks from Youtube, Soundcloud, Bandcamp and several other streaming sources. It's the core of openwhyd.org's music web app.

Problem

Found evidence that Google Chrome prevented videos from starting to play when their tab was in the background:

To prevent user annoyance and conserve power, Chrome will now defer playback of autoplay videos in background tabs until the first time the tab is foregrounded.

Source: https://github.com/openwhyd/openwhyd/issues/88#issuecomment-341401701

Note: this issue does not apply when Playemjs is running in an Electron app. (cf https://github.com/openwhyd/openwhyd-electron)

Howto

In order to solve this issue, you are invited to fork this GitHub repository, makes changes to it, and then create a Pull Request so we can merge your changes back to this repository.

First, you may want to read about:

I will be happy to assist you at any stage, if you want to try to solve this issue! If you have any question, just leave a comment below. Beginners are also welcome! 🤗

adrienjoly commented 6 years ago

Reproduced bug on /test/sample.html:

  1. Open /test/sample.html
  2. Make sure that two videos are played sequentially: the one with a beeping counter + the one with a dinosaur / godzilla
  3. Leave the tab open, and switch to another tab during 10+ seconds

Expected behaviour: the two videos should keep being played in sequence. (looping)

Observed behaviour: after the end of the video that was currently playing, the next video does not start playing until we switch back to the corresponding page/tab.

adrienjoly commented 6 years ago

Calling playVideo() programmatically instead of relying on Youtube's autoplay parameter does not fix this issue, unfortunately... (cf https://github.com/adrienjoly/playemjs/pull/16)

SkinyMonkey commented 6 years ago

If anybody want to dig into this player :

https://github.com/CookPete/react-player/blob/master/src/players/YouTube.js

They managed to make it work.

They still have a few problems with reading tracks from different providers but it's a start.

adrienjoly commented 6 years ago

Thanks for sharing this, @SkinyMonkey!

Can you tell us more about the problems you've had with other providers?