Player stops instead of reproducing next video when you change browser tab

[cropcrop]

Live example: http://codepen.io/hone/pen/dYKjro

Two videos, first ends, second starts.
But let's switch to another browser tab before the first video ends, player will pause and second video will never start until you come back to the previous tab.

The issue affects at least chrome and safari (not tested on IE), but works fine on firefox.

[brandly]

this is mentioned in #82 as well. it's a change with the underlying YouTube API. youtube.com also exhibits this behavior now

[brandly]

thanks for supplying a codepen tho! good videos hahaha

i tried doing something like this as a workaround

$scope.$on('youtube.player.ready', function ($event, player) {
  player.playVideo()
});

....but it didn't work

[cropcrop]

I tried almost everything.. looks like that's the new behaviour chrome and safari adopted to speed up performances.

Unfortunately we can do anything 😅

[cropcrop]

Hey @brandly I've seen you added a new "dynamic" video change in the demo section!

Maybe keeping the same player could fix the autoplay problem when you're on a different tab?
Not tested yet, maybe you did!

[brandly]

maybe you could try testing out the code over here and letting me know what you find. if it turns out using the existing player fixes this problem, then i'll make it a priority to get that merged and published

[patrickcorrigan]

Any update on this?

[ashe540]

I'm also experiencing this issue. Any idea if there's a way to avoid it?

[patrickcorrigan]

@ashe540 I got around the issue by modifying the library slightly. It was a while ago so I can't quite remember the details. It comes down to this library creating a new player object for each video. Instead you want to tell the old player object to play the new video instead of created a new player object to play the new video. If this is done it will continue to play when in a different tab. I'll try and find the mods I made. It's only about 3 lines of code.

[ashe540]

@patrickcorrigan that would be great, thank you!

[patrickcorrigan]

@ashe540 Sorry about getting it to you this way. My machine that has this code wifi has stopped working and I have no other copy so I just typed this out while looking at the code on its screen(Hopefully I didn't make any typos). You need to modify the loadPlayer function in src/angular-youtube-embed.js starting line 193 - 201 from this

            function loadPlayer () {
                if (scope.videoId || scope.playerVars.list) {
                    if (scope.player && typeof scope.player.destroy === 'function') {
                        scope.player.destroy();
                    }

                    scope.player = createPlayer();
                }
            };

to this

            function loadPlayer () {
                if (scope.videoId || scope.playerVars.list) {
                    if(scope.player)
                    {
                         // player already exists do not replace instead use old player
                         scope.player.loadVideoById(scope.videoId, 0, 'default')
                     } else {
                        scope.player = createPlayer();
                     }
                }
            };

[ashe540]

@patrickcorrigan that is absolutely fine. Sorry you had to type it word for word. Happy to say this solves the issue. Probably a good time as ever to merge the changes :)

[ignocide]

@cropcrop
I'm fixed this problem, this problem is rerendering the iframe when each play a video
youtube support a play next id, url,list as javascript function
here