UPDATE: According to the release notes of JW 7.2.2 (18th December 2015) this should now be fixed: Player should now respond to touch events properly on iOS 7.
Although it was identified during the beta testing phase that JW7 wasn’t working on certain iOS devices (7th July 2015), the code was still pushed into production on 20th July 2015.
Even after a subsequent point release (7.0.1 on 5th August 2015) this situation had still not been resolved and at no point had this been recorded as a known issue – JW7 Release notes
Then on 18th August 2015, the JW Team shared their stance that JW7 actually only currently supports iOS8:
Todd Grunow – Aug 18, 2015 05:12PM EDT
Our document at http://support.jwplayer.com/customer/portal/articles/1403653-browser-device-reference has been updated to indicate that we currently support iOS 8 and up. Our engineers are looking into a fix to enable support in iOS 7. They expect to have a fix in the coming weeks.
Whilst this may appear at odds with the message presented by the marketing arm of JW Player, long time followers of JW operations will know to take most of their claims with a pinch of salt!
Incidentally, JW7 no longer supports IE8 either – a position which has actually been documented.
So what’s the issue?
Depending on the media type you are loading in JW7, you will likely experience the following behaviour on mobile devices running operating systems earlier than iOS8:
- YouTube media – Tapping on the JW play button causes the icon to switch to a buffering state, whilst behind this the YouTube play button appears. The media won’t actually begin to play until you tap again on the poster image. If you were to initially tap on the poster image (rather than the play button) the media will play first time.
- Other media – In most cases the player is completely unresponsive. No matter where you click the player will not react.
In both instances the JW play button is incorrectly positioned relative to the middle of the device viewport – rather than appearing in the middle of the player area.
And what’s the workaround?
YouTube media
For JW7 embeds which only use YouTube media, the workaround is relatively straightforward. You basically have to tell JW Player to ignore the initial touch event and (quite literally) pass this event through to the underlying YouTube player. This can be done by adding the following CSS to your page:
#<PLAYERID> .jw-display-icon-container{
pointer-events:none;
}
Where <PLAYERID> above is replaced with the container ID used in your specific player setup.
Whilst this will make the player react correctly, it doesn’t resolve the issue of the incorrectly positioned play button.
Other media
Unfortunately, for JW7 embeds which use other media, it’s not as straightforward as simply adding some CSS to the page.
Fortunately however, I’ve written a plugin to take care of the additional complexities and so all you need to do is to add the following code to your player setup:
"plugins":{
"http://www.dev.powered-by-haiku.co.uk/solutions/jw7ios7fix/code/jw7ios7fix.js":{}
}
This plugin works for both YouTube media and other media embeds – and resolves the issue of the incorrectly positioned play button for both scenarios.
Tatami for Online Video
If you are using Tatami for Online Video to build and generate your JW Player embeds, this workaround will automatically be included when your player is rendered using iOS6/iOS7.
