videojs-contrib-hls bugginess on mobile safari

Question

I have a videojs player and using videojs-contrib-hls

element:

<video class="video-js vjs-default-skin vjs-big-play-centered" controls playsinline)

javascript:

const player = videojs(element)
player.src({
  type: 'application/x-mpegURL',
  src: <hls-url>
})

player.on('error', (e) => {
  console.error(e)
})

player.on('loadeddata', () => {
  console.log('laodeddata')
})

On desktop safari this works smoothly and everything is good. On Mobile safari I'm seeing the following issues:

1. The full screen icon is on the player, tapping the full screen icon makes the screen go full and then it immediately collapses back to be inline. I tried removing the playsinline attribute but when I did that the video was not able to play on mobile safari at all
2. About 4 out of 5 times (almost always) after tapping the play button the video correctly starts playing, but it freezes on the first frame and gets stuck. No error callbacks are fired, it just gets stuck and refresh is required. After several refreshing it will actually play and stream successfully.

Answer 1

The issue here was the library fastclick: https://github.com/ftlabs/fastclick

When the user clicks the "play" button fastclick was getting in the way and the Mobile Safari engine thought the play() was not initiated by a user gesture so Safari auto-paused the video.

The same effect was happened for the full screen action.