triniwiz / nativescript-plugins

Apache License 2.0
80 stars 50 forks source link

Cannot play shortly after player is loaded (Android) #92

Closed chris-praxis closed 2 years ago

chris-praxis commented 3 years ago

@triniwiz/nativescript-youtubeplayer 4.1.4 NS 8.1.4 Android 11

Some time after my page containing a YoutubePlayer is loaded, I get the prints

chromium: [ERROR:web_contents_delegate.cc(228)] WebContentsDelegate::CheckMediaAccessPermission: Not supported.
chromium: [ERROR:web_contents_delegate.cc(228)] WebContentsDelegate::CheckMediaAccessPermission: Not supported.

If I call 'play' prior to these permission prints, it does not play and I get

chromium: [INFO:CONSOLE(1)] "Uncaught TypeError: player.playVideo is not a function", source: https://www.youtube.com/ (1)

If I call 'play' after these permission prints, it works. The only way I know to tell programmatically whether 'play' was successful is by checking for a state change, so I came up with the following workaround...

            onPlayVideoTap()
            {
                let player = this.$refs.videoPlayer.nativeView;
                let playCount = 0;
                let _this = this;

                Timer.clearTimeout(this.playStartTimerID);
                this.playStartTimerID = Timer.setInterval(function(){
                    if(_this.videoState == 'unstarted'){
                        console.log("play video["+(playCount++)+"]: "+_this.videoSource);
                        player.play();
                    }else{
                        Timer.clearInterval(_this.playStartTimerID);
                        _this.playStartTimerID = -1;
                    }
                }, 250);
            },

...where 'videoState' has been set in response to an event...

            onStateChange(args)
            {
                const STATES = ['unstarted', 'ended', 'playing', 'paused', 'buffering', 'bad', 'cued'];
                let player = this.$refs.videoPlayer.nativeView;
                let stateNum = args.state;

                this.videoState = STATES[stateNum + 1];
            },

Sample output...

chromium: [INFO:CONSOLE(865)] "Unrecognized feature: 'picture-in-picture'.", source: https://www.youtube.com/s/player/9a0939d3/www-widgetapi.vflset/www-widgetapi.js (865)
JS: play video[0]: aZKLf6gV04U
chromium: [INFO:CONSOLE(1)] "Uncaught TypeError: player.playVideo is not a function", source: https://www.youtube.com/ (1)
JS: play video[1]: aZKLf6gV04U
chromium: [INFO:CONSOLE(1)] "Uncaught TypeError: player.playVideo is not a function", source: https://www.youtube.com/ (1)
JS: network connection: WiFi
JS: play video[2]: aZKLf6gV04U
chromium: [INFO:CONSOLE(1)] "Uncaught TypeError: player.playVideo is not a function", source: https://www.youtube.com/ (1)
JS: play video[3]: aZKLf6gV04U
chromium: [INFO:CONSOLE(1)] "Uncaught TypeError: player.playVideo is not a function", source: https://www.youtube.com/ (1)
chromium: [ERROR:web_contents_delegate.cc(228)] WebContentsDelegate::CheckMediaAccessPermission: Not supported.
chromium: [ERROR:web_contents_delegate.cc(228)] WebContentsDelegate::CheckMediaAccessPermission: Not supported.
JS: play video[4]: aZKLf6gV04U
JS: video state: unstarted (-1)
JS: video state: buffering (3)
JS: video state: playing (1)

Rather ugly but it works.

triniwiz commented 3 years ago

Are you waiting for the events e.g (ready ) to fire before trying to play ?

chris-praxis commented 3 years ago

No, I wasn't. It does work if I only call play after ready event fires. Thanks!

chris-praxis commented 2 years ago

Issue is resolved by waiting for the "ready" state.