React-player: Requires two clicks to play on iOS

[sarutole]

Please advice what is the right way to unlock

    componentDidMount() {
        document.addEventListener('click', this.onPageClick);
    }

    componentWillUnmount() {
        document.removeEventListener('click', this.onPageClick);
    }

    onPageClick(e){
        const $el = $(e.target).closest('a[data-playable]');
        const url = $el.attr('href')

        if( $el.length ){ //check if a "playable" link was clicked
            e.preventDefault();
            this.play(url);
            return false;
        }
    }

    play(url) {
       const newState = {
            url,
            played: 0,
            loaded: 0,
            playing: true
        };
        this.setState(newState);
    }

[sarutole]

Adding autoplay="true" to <audio> element for iOS devices fixes the "two-clicks" issue. (By the way, currently the react-player demo also has this problem.)

fileConfig: {
     attributes: { autoPlay: /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream }
},

[kpennell]

@sarutole Did you just put autoPlay={true} or use a the config prop or something else entirely?

[sarutole]

@kpennell just adding that line to fileConfig fixed the issue for me.
But that was a while ago, I have not tested it with any recent version of react-player.

[kpennell]

Thanks, that was really helpful.

On Tue, Apr 10, 2018 at 12:16 PM, SaruTole [e-mail] wrote:

@kpennell https://github.com/kpennell just adding that line to
fileConfig fixed the issue for me.
But that was a while ago, I have not tested it with any recent version of
react-player.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/CookPete/react-player/issues/249#issuecomment-380216304,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABAuIZVwrBHXdswyNeYi5Qf3eldpaQbpks5tnQT6gaJpZM4P30y6
.