Search code examples
iosvideojwplayerhttp-live-streaming

JWPlayer cutting off captions in iOS subtitles


I am using JWPlayer with an HLS file that contains subtitles. However, when I play this file on an iPhone or other iOS device, it chops off the subtitles:

enter image description here

Is there a way to raise the height of the subtitles on a mobile device? The HLS file I have is:

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="English",FORCED=NO,AUTOSELECT=YES,URI="en-sub.m3u8",LANGUAGE="en"
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="Spanish",FORCED=NO,AUTOSELECT=YES,URI="es-sub.m3u8",LANGUAGE="es"
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="aac",NAME="English",DEFAULT=YES,AUTOSELECT=YES,LANGUAGE="en",URI="en.m3u8"
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="aac",NAME="French",DEFAULT=NO,AUTOSELECT=YES,LANGUAGE="fr",URI="fr.m3u8"
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="aac",NAME="Italian",DEFAULT=NO,AUTOSELECT=YES,LANGUAGE="it",URI="it.m3u8"
#EXT-X-STREAM-INF:PROGRAM-ID=1,NAME="SD",BANDWIDTH=256000,SUBTITLES="subs",AUDIO="aac"
SD.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,NAME="HD",BANDWIDTH=768000,SUBTITLES="subs",AUDIO="aac"
HD.m3u8

Solution

  • This is actually something that we have a ticket for (as well as submitted a ticket to Apple), to fix. It only seems to affect iOS8, as iOS7 is fine.

    Issue is related to -webkit-transform: scale on the video tag.

    Try to add the following style to your player div to see if this will fix it.

    style="-webkit-transform: scale(1, 1);"

    If that does not work, try:

    style="-webkit-transform: scale(1, 1) !important;"

    You might need to double nest the divs and apply the style to the outer div, like so:

    <div style="-webkit-transform: scale(1, 1) !important;"><div id="player"></div></div>
    

    You can also try to apply the style just to the player div, and not use an outer div.