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.
Top comments (4)
I tried this on iOS 12.1.4 with Videojs 7.4.1. It makes no difference. Videojs gives better control but if the user goes fullscreen (which they need to be able to do on a small screen device) my app still crashes when they exit fullscreen. It takes about three open/close transitions before closing fullscreen causes the app to crash. I am abandoning HTML5 video in my app for now. Works perfectly on Android but iOS is just too unreliable. Unless you (or anyone else on this forum) can suggest something else?
Hi we are facing the same issue with our app for the video js we have a modal window in which the video plays on closing the modal window app closes please provide some pointers
Hi, Navneet which version of video.js are you using in your app? And in which os and version you are facing this issue? Could you please provide more information so that I can help.
muiplayer player supports configuring video inline playback, and has most configurable APIs. Can refer to: muiplayer.js.org/