0

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

Aameer
  • 1,366
  • 1
  • 11
  • 30
  • What version of JW Player are you using? Native caption support for iOS (iphone/ipod) devices was only introduced in JW7.3+. – jherrieven May 13 '16 at 08:35
  • yes I am using 7.4.2 the same used in the example(http://qa.jwplayer.com/~heidi/cc_indee_test.html http://qa.jwplayer.com/~heidi/beautifulmind.vtt) mentioned above – Aameer May 13 '16 at 09:30

1 Answers1

0

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/

jherrieven
  • 425
  • 2
  • 5
  • Hey @jherrieven I am using JW 7.4.2 , I am using a valid WebVTT as can be verified here https://quuz.org/webvtt/. Moreover I am doing request from the same domain but what I am trying I guess in that case it is not hosted we created the file and send it across to front-end. My captions files in both cases end with .vtt, I also tried the plugin although it has a syntax issue but I looked into the js code of video embedded on the page and that had correct syntax but still didn't solve my issue .I am going to share with you a live example after sometime so that it could be easier for you to debug – Aameer May 16 '16 at 05:27
  • Hi. If the URL to your VTT is as you've link to above (https://preproduction.indee.tv/captions/16885/) then it doesn't end with ".vtt" and so won't work with JW on iOS. – jherrieven May 16 '16 at 07:51
  • should the url also end with .VTT?, of just the filename as shown in the screen shot in the image? – Aameer May 16 '16 at 08:12
  • I used this url on local instead "/captions/16885/captions.vtt" and served it with the same django code, but still the same issue. Again if I use a physical file it would work. So is there something else which I could play around with to see if it would work please let me know, thanks for your time – Aameer May 16 '16 at 08:31
  • Here's an example I've put together using the code snippets you have supplied - using the original JW example, but linking to your VTT file. I've had to proxy your file in order to overcome the CORS issue and if I don't include the spurious ".vtt" on the end it will not work in iOS, even though the file being served is exactly the same. Can you check this and see if it works for you? http://dev.powered-by-haiku.co.uk/debug/aameer/ – jherrieven May 16 '16 at 10:04
  • you are the man @jherrieven , it is working now, your spurious ".vtt" did the trick.Please update your answer I will accept it. Thanks – Aameer May 16 '16 at 12:34
  • moreover I had to use the plugins too otherwise it doesn't work – Aameer May 16 '16 at 12:37