Video inline player hangs on pause on iOS 10.3

[jermspeaks]

Description

I'm having trouble playing an inline video from a click / touch event on iOS 10.3 with the iPad and iPhone.

Briefly describe the issue.
In this demo, I was able to play the video with Desktop (Chrome 60 on MacOS) and Android 7.1+ by clicking on a button element with a click event handler to start playing the video once ready. However, I'm unable to get the video to play on iOS 10.3.

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

1. Go to this link on the iPad: Codepen link
2. Click on the play button to play video

Results

Expected

Video to show the loading spinner, show the controls, switch the play to pause, and start the video.

Actual

The video loading spinner animation starts, shows the controls, the play button stays in play state, and the video pauses and is stuck in pause.

Error output

There's no error output.

Additional Information

versions

videojs

Checked for both 5.1.9 and 6.2.4.

browsers

Safari Version/10.0 Mobile

OSes

iPad iOS 10.3.3
iPhone 5 10.3.1

plugins

No plugins

Additional notes

I've noticed similar issues from #3283 and #545 and #4562. I'm unsure if this is a problem with inline video playback as I'm able to get it working if the video goes in fullscreen. Any help or feedback appreciated.

[mister-ben]

This is Safari requiring interaction to start a video, and putting play() inside a ready callback in your click event handler is far enough removed to not satisfy that requirement. It would work if you added the muted attribute, because Safari does allow programmatic play without interaction / autoplay of muted videos.

You shouldn't need to put play() inside the ready callback, play() already does some handling of the player state.

[jermspeaks]

Thanks @mister-ben, I went ahead and took it off the ready callback, and it worked. Looks like I'll have to re-write my code so that on Safari, triggering play happens immediately. and not within the ready callback.