Youtube do not autoplay anymore on Google Chrome #149

adrienjoly · 2018-06-30T10:23:25Z

Situation, when clicking on a Youtube track, on Google Chrome:

=> The Youtube wrapper of Playemjs (the track player used by Openwhyd) may need a quick fix, e.g. by calling the playVideo() function instead of relying on the embed's autoplay setting.

Read more on how to do that: https://github.com/openwhyd/openwhyd/blob/96370c5c0dcfd198cc84909032ac0f13fd8ff3ed/docs/playemjs-fix-procedure.md

The text was updated successfully, but these errors were encountered:

adrienjoly · 2018-08-15T08:56:26Z

Just checked if the error was coming from Playemjs' Youtube player (adrienjoly/playemjs#18): it's not. => The problem must be coming from Openwhyd's patched version of the Youtube player (whydJS/public/js/playem-youtube-iframe.js).

=> Running Openwhyd's automated tests to see if they pass.

adrienjoly · 2018-08-15T09:07:37Z

All automated tests pass.

My hypothesis is that Webdriver is using an old version of Google Chrome on which the bug was not happening.

=> Next check: manually test playback of youtube tracks from my local openwhyd instance, on the latest version of Chrome.

adrienjoly · 2018-08-15T09:09:51Z

Youtube playback is also working from Openwhyd on localhost:

Hypothesis: while running locally, Openwhyd uses Playemjs' native Youtube player instead of whydJS/public/js/playem-youtube-iframe.js => let's find a way to play through this patched player instead, even from localhost.

adrienjoly · 2018-08-15T09:13:51Z

Actually, it seems that whydJS/public/js/playem-youtube-iframe.js is not loaded by any page or module anymore, except an old test for Deezer.

=> added a comment, and going to check whydJS/public/js/playem-youtube-iframe-patch.js instead.

adrienjoly · 2018-08-15T09:33:21Z

whydJS/public/js/playem-youtube-iframe-patch.js loads /html/YoutubePlayerIframeLocal.html or /html/YoutubePlayerIframe.html, depending on where Openwhyd is running (i.e. from localhost or openwhyd.org, respectively)

/html/YoutubePlayerIframeLocal.html or /html/YoutubePlayerIframe.html are basically the same file, except the latter explicitly loads playem-all.js and whydRemotePlayer.js from the openwhyd.org domain instead of using a relative path.

=> Let's investigate what whydRemotePlayer.js does.

adrienjoly · 2018-08-15T09:41:17Z

Playback also works from localhost, when forcing IFRAME_PATH to/html/YoutubePlayerIframe.html instead of /html/YoutubePlayerIframeLocal.html.

=> let's now pretend that we're running from production => have IFRAME_HOST use the CDN.

EDIT: dumb idea, because doing that uses the CDN-cached version of YoutubePlayerIframe.html, which expects an ORIGIN of openwhyd.org for incoming messages, whereas the local instance sends from localhost => it cannot work => let's have a look of what's happening exactly when trying to play a youtube track from openwhyd.org, to see if we see an error message

adrienjoly · 2018-08-15T09:54:40Z

Found in javascript logs when trying to play the youtube track from https://openwhyd.org/yt/aZT8VlTV1YY:

populating track list...

playem-youtube-iframe-patch.js?1.1.1:56 YT-iframe not ready => ignoring call to stop
Player.safeCall @ playem-youtube-iframe-patch.js?1.1.1:56

playem-youtube-iframe-patch.js?1.1.1:127 youtube iframe stop:

playem-min.js?1.1.1:2 DEEZER STOP

whydPlayer.js?1.1.1:555 evt: onTrackChange (Youtube)

playem-youtube-iframe-patch.js?1.1.1:56 YT-iframe not ready => ignoring call to setVolume

window.playTrack @ whydPlayer.js?1.1.1:771

whydPlayer.js?1.1.1:555 evt: loadMore

whydRemotePlayer.js:15 ORIGIN https://openwhyd.org

whydRemotePlayer.js:57 PLAYER YoutubePlayer {eventHandlers: {…}, embedVars: {…}, label: "Youtube", isReady: false, trackInfo: {…}, …}

VM591:1 Uncaught SyntaxError: Unexpected token ! in JSON at position 0
    at JSON.parse (<anonymous>)
    at playem-youtube-iframe-patch.js?1.1.1:35
(anonymous) @ playem-youtube-iframe-patch.js?1.1.1:35

base.js:6069 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

adrienjoly · 2018-08-15T10:01:36Z

While debugging the JSON parse error from playem-youtube-iframe-patch.js, I found that e.data has a the following value: !_{"h":""}. 🤔

I also found that this parse error and the "violation" warning are happening on the local instance as well, and does not prevent the video from starting.

adrienjoly · 2018-08-15T10:13:31Z

Hypothesis: the bug happens only thru HTTPS (SSL).

Test: Try to play the youtube track from http://openwhyd.org/yt/aZT8VlTV1YY a new chrome incognito window, after disabling the "Protect you and your device from dangerous sites" setting. (to prevent the automatic HTTP-->HTTPS redirection)

Result: the track also does not play when using HTTP.

adrienjoly · 2018-08-15T12:11:26Z

Hypothesis:

I need to use the CDN-bridged player patch in order to reproduce the bug
In order to do that, I need to setup a virtual host + port forwarding on my Mac, so that localhost:8080 is reachable thru openwhyd.org:80

1. attach openwhyd.org to localhost

cf https://www.imore.com/how-edit-your-macs-hosts-file-and-why-you-would-want

$ sudo code /etc/hosts
# add a line:`127.0.0.1	openwhyd.org` (separated by a tab) in that file
$ sudo killall -HUP mDNSResponder
# to refresh the local DNS cache

... and then open a new incognito chrome window => openwhyd.org:8080 works.

2. port forwarding 8080->80

cf https://serverfault.com/a/787565/284330
cf https://salferrarello.com/mac-pfctl-port-forwarding/

2.1. check current rules

$ sudo pfctl -s nat

No ALTQ support in kernel
ALTQ related functions disabled
nat-anchor "com.apple/*" all
rdr-anchor "com.apple/*" all

2.2. try the restore command

$ sudo pfctl -F all -f /etc/pf.conf

2.3. add the port forwarding

$ echo "
rdr pass inet proto tcp from any to openwhyd.org port 80 -> 127.0.0.1 port 8080
" | sudo pfctl -ef -

2.4. check current rules again

$ sudo pfctl -s nat
No ALTQ support in kernel
ALTQ related functions disabled
rdr pass inet proto tcp from any to 127.0.0.1 port = 80 -> 127.0.0.1 port 8080

=> it's working: I can access my localhost:8080 server from openwhyd.org (port 80) 🎉

3. try playing the youtube track from the fake openwhyd.org

open http://openwhyd.org/yt/aZT8VlTV1YY in the incognito window opened in step 1.
click on the play button in the center of the page => bug: reproduced! 💪

adrienjoly · 2018-08-15T12:13:45Z

Now that I'm able to test the real youtube playback behavior from my local openwhyd instance, let's try to apply playemjs' PR: https://github.com/adrienjoly/playemjs/pull/16/files, to see if it fixes the issue.

=> Plan:

apply the PR changes to the playem-all.js of openwhyd (temporary)
$ docker-compose restart web
hard-refresh the page in the incognito window and try to play the track again

=> still does not play

adrienjoly · 2018-08-15T12:33:02Z

Found the fix (at least working when testing locally): https://stackoverflow.com/a/48747474/592254

Google Chrome now requires to use a allow="autoplay" attribute in the iframe that displays a youtube video.

Let's commit the fix and test it in production!

=> bump to v1.1.4

adrienjoly · 2018-08-15T12:38:49Z

Fixed! 🍾

=> release and deploy v1.1.4 (https://github.com/openwhyd/openwhyd/releases/tag/v1.1.4)

adrienjoly added bug help wanted labels Jun 30, 2018

adrienjoly mentioned this issue Jul 7, 2018

BUG: after Vimeo track, following tracks do not play #150

Closed

adrienjoly mentioned this issue Aug 15, 2018

Youtube tracks do not autoplay anymore on Google Chrome adrienjoly/playemjs#18

Closed

adrienjoly self-assigned this Aug 15, 2018

adrienjoly added a commit that referenced this issue Aug 15, 2018

fix: playback of youtube tracks on google chrome (#149)

b3784b5

=> bump to v1.1.4

adrienjoly closed this as completed Aug 15, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Youtube do not autoplay anymore on Google Chrome #149

Youtube do not autoplay anymore on Google Chrome #149

adrienjoly commented Jun 30, 2018 •

edited

Loading

adrienjoly commented Aug 15, 2018

adrienjoly commented Aug 15, 2018

adrienjoly commented Aug 15, 2018

adrienjoly commented Aug 15, 2018

adrienjoly commented Aug 15, 2018

adrienjoly commented Aug 15, 2018 •

edited

Loading

adrienjoly commented Aug 15, 2018

adrienjoly commented Aug 15, 2018

adrienjoly commented Aug 15, 2018 •

edited

Loading

adrienjoly commented Aug 15, 2018

adrienjoly commented Aug 15, 2018 •

edited

Loading

adrienjoly commented Aug 15, 2018

adrienjoly commented Aug 15, 2018

Youtube do not autoplay anymore on Google Chrome #149

Youtube do not autoplay anymore on Google Chrome #149

Comments

adrienjoly commented Jun 30, 2018 • edited Loading

adrienjoly commented Aug 15, 2018

adrienjoly commented Aug 15, 2018

adrienjoly commented Aug 15, 2018

adrienjoly commented Aug 15, 2018

adrienjoly commented Aug 15, 2018

adrienjoly commented Aug 15, 2018 • edited Loading

adrienjoly commented Aug 15, 2018

adrienjoly commented Aug 15, 2018

adrienjoly commented Aug 15, 2018 • edited Loading

adrienjoly commented Aug 15, 2018

1. attach openwhyd.org to localhost

2. port forwarding 8080->80

2.1. check current rules

2.2. try the restore command

2.3. add the port forwarding

2.4. check current rules again

3. try playing the youtube track from the fake openwhyd.org

adrienjoly commented Aug 15, 2018 • edited Loading

adrienjoly commented Aug 15, 2018

adrienjoly commented Aug 15, 2018

adrienjoly commented Jun 30, 2018 •

edited

Loading

adrienjoly commented Aug 15, 2018 •

edited

Loading

adrienjoly commented Aug 15, 2018 •

edited

Loading

adrienjoly commented Aug 15, 2018 •

edited

Loading