iosdjangocaptionsclosed-captionsjwplayer7

jwpayer captions on IOS fullscreen with dynamically generated captions file

Question : if I use dynamically generated .ass file (details of how explained below). Do I need to set any parameter to mock the behavior of a physical .ass static file present on my server which I can serve with django?

now the actual question is about using .ass files as caption files with jwplayer in context.

Inshort my question is if I have a file called captions.vtt and having contents as under:

WEBVTT

00:00:03.000 --> 00:00:06.000
<v Roger Bingham>We are in New York City

00:00:13.000 --> 00:00:16.000
<v Roger Bingham>We're actually at the Lucern Hotel, just down the street

and I generate the content in django like this:

#url which generated and returns captions file
urlpatterns += patterns('apps.mymodel.views',
                       url(r'^captions/(?P<pk>[0-9a-zA-Z]+)/$', 'captions_view',name='captions'),
)
#this view is responsible for creating .vtt files on go and returning them
def captions_view(request,pk):
    """
    To Avoid multiple caption files for html5 players we use cap.vtt
    as a template and then pass the text onwards.Note the cap.vtt has the approx
    time for which caption should be visible,
    To fix the issue with the iphone captions trying it as file download and assigning content type
    """
    print('In the captions view')
    myobj = Myobj.objects.get(pk=pk)
    watermark_text = myobj.watermark_text
    from django.template import Context
    from django.template.loader import get_template
    from django.http import HttpResponse
    captions_context = Context(dict(text=text))
    captions_body = get_template('home/cap.vtt').render(captions_context)
    mimetype = "text/vtt"
    response = HttpResponse(captions_body, content_type=mimetype)
    response["Content-Disposition"]= "attachment; filename=capt.vtt"
    #return render_to_response('home/cap.vtt',{'watermark_text':watermark_text})
    return response

#template for .vtt ( name for the template is home/cap.vtt)
WEBVTT
00:00:00.000 --> 00:00:02.000
<v Roger Bingham>We are in New York City
00:00:03.000 --> 03:00:00.000
{{text}}


the output in this case would be say something like
WEBVTT
00:00:00.000 --> 00:00:02.000
<v Roger Bingham>We are in New York City
00:00:03.000 --> 03:00:00.000
woouf

If the above question doesn't make any sense then the details of the issue I am facing are : the captions don't show up on the iphone full screen(ios devices) as the IOS(iphone and ipod) forces the users to check the video in full screen.

For our use case we are generating the captions file dynamically. The way we are serving caption file is explained as above:

If I am not wrong the webvtt (i.e .vtt) file is a simply plain text containing several types of information about the video. So in our case we are dynamically generating it and serving it by a url in the case which we were discussing earlier we can see similar one here. Although, I we 'directly use a .vtt file' It works but I dont want to do that given the architecture of my app. But Isn't this similar to serving like a static file and aren't we doing that already?. So keeping everything in mind , what is the cleanest way to fix this issue preferably with minimum possible changes. I am assuming that maybe I am missing a header or something which could make it work. is that so?

some more details related to the issue which may shed some more light into the issue:

link from jwplayer support: https://support.jwplayer.com/customer/portal/articles/1407438-adding-closed-captions

link from apple support for captions with hls: https://developer.apple.com/library/ios/qa/qa1801/_index.html

some experiments I did based on this :

After digging in little deeper we also added CLOSED-CAPTIONS attribute for the EXT-X-STREAM-INF tag but still we couldn’t see the desired results sample master.m3u8 file which we finally used is as under:

#EXTM3U
#EXT-X-MEDIA:TYPE=CLOSED-CAPTIONS,GROUP-ID="cc"
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1075000,RESOLUTION=640x360,CODECS="avc1.42001e,mp4a.40.2",CLOSED-CAPTIONS="cc"
4610_360.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1692000,RESOLUTION=854x480,CODECS="avc1.42001f,mp4a.40.2",CLOSED-CAPTIONS="cc"
4610_480.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2874000,RESOLUTION=1280x720,CODECS="avc1.42001f,mp4a.40.2",CLOSED-CAPTIONS="cc"
4610_720.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=4623000,RESOLUTION=1280x720,CODECS="avc1.420028,mp4a.40.2",CLOSED-CAPTIONS="cc"
4610_1080.m3u8

we also tried :

#EXTM3U
#EXT-X-MEDIA:TYPE=CLOSED-CAPTIONS,GROUP-ID="cc",NAME="CC1",LANGUAGE="en",DEFAULT=YES,AUTOSELECT=YES,INSTREAM-ID="CC1"
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1075000,RESOLUTION=640x360,CODECS="avc1.42001e,mp4a.40.2",SUBTITLES="subs",CLOSED-CAPTIONS="cc"
4610_360.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1692000,RESOLUTION=854x480,CODECS="avc1.42001f,mp4a.40.2",SUBTITLES="subs",CLOSED-CAPTIONS="cc"
4610_480.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2874000,RESOLUTION=1280x720,CODECS="avc1.42001f,mp4a.40.2",SUBTITLES="subs",CLOSED-CAPTIONS="cc"
4610_720.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=4623000,RESOLUTION=1280x720,CODECS="avc1.420028,mp4a.40.2"SUBTITLES="subs",CLOSED-CAPTIONS="cc"
4610_1080.m3u8

I wanted to confirm if we are building the master file right which is used for adaptive streaming? but this doesn't hold as .mp videos are facing the same issue which shouldn't have been the case in-case hls was an issue.

while this example using the same player works :

setting up your VTT files this way, uses the same player:

http://qa.jwplayer.com/~heidi/cc_indee_test.html http://qa.jwplayer.com/~heidi/beautifulmind.vtt

I am also attaching details of shots of the two requests in the above two cases. working one not working one I have been stuck on this for a long time. Anyone who has some insight into this please share.It would be great if you could share a code snippet or a working example of some kind. Thanks

Solution

  • In order to get captions working consistently with JW Player (including on iDevices) you need to ensure the following:

    1. You are using JW 7.3+;
    2. The captions file is a valid WebVTT file - ideally with the "text/plain" mime-type;
    3. The captions file has the relevant CORS headers open ("Access-Control-Allow-Methods" and "Access-Control-Allow-Origin") to allow GET access from the requesting domain, or the file is hosted on the same domain as the player software;
    4. The captions file URL ends in ".vtt" - due to some sloppy JW coding, this is required for iOS

    Or you could look at adding my iOS captions plugin for JW Player which overcomes these issues, honours the JW captions styling block in iOS and works with earlier JW versions too: http://dev.powered-by-haiku.co.uk/solutions/jwioscaptions/