To give a background. We were using an older version of VideoJS (5.4.4) which does not prevent videos from playing in the native iOS video player like in the below image. So we did not have any control over the playing video.

Image courtesy - http://www.iphonehacks.com

With iOS 12 release, our mobile app which was developed in Cordova crashed every time the user exit from fullscreen.

We analysed the issue and were able to find a solution to force videos to play inline inside the application instead of letting iOS take control over the video.

Add playsinline or webkit-playsinline to your HTML5 video tag. And go to your Cordova config.xml file and add the following preference for iOS platform.

<preference name="AllowInlineMediaPlayback" value="true"/>
~~~~~~~~

Now when we built our application we were successful in preventing the video from playing in native player but we could see the native controls on the video player and on clicking it the user could still switch to iOS native video player. We tried adding all possible css styles suggested on different forums and stackoverflow but those did not help. We finally had to upgrade to latest VideoJS version in which the native controls were hidden. 


Hope this article is helpful.