Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Captions in fullscreen mode (iOS)

Folks,
I read what you wrote about using captions (subtitles) in fullscreen mode:

*********
VTT captions are preferred, since they are part of the HTML5 standard. JW Player supports both formats across all browsers though, in both Flash and HTML5 mode. The only exception is playback in fullscreen on iOS, since the native fullscreen mode does not allow JW Player to print captions over the video. Since the iPhone can only display video in full screen, this means that sideloaded captions will not function on this device.
*********

And I have a question for you. I noticed that when we use iPAD browsers, we are incapable of seeing any subtitle added to our videos in any way, but only in fullscreen mode. When not in fullscreen, they appear perfectly. And iPhone also doesn't show them (noticed this when changed my useragent in the Mercury browser for iPAD, which also removed the subtitle/resolution buttons from another player I was using at the time).

However, when I embedded Youtube videos, the subtitles appeared in fullscreen mode in iOS Safari/browsers. This was a huge surprise for me, and I wonder:

- Is this a JWPlayer limitation that can be lifted in newer versions, or this is something that APPLE needs to fix for future iOS/Safari/iPAD versions?

How can you account that Youtube can display subtitles in fullscreen mode, but yours (and other players) cannot? Since I am a fan of subtitles, and use my iPAD for watching anything (preferably never using Youtube), knowing this was a huge letdown.

P.S. In case you want a Youtube video to check my statement, try using this iframe code in a blog/site and an iPAD to see the english subtitles appearing in fullscreen mode:

<iframe width="420" height="315" src="https://www.youtube.com/embed/py2b1g73bt4" frameborder="0" allowfullscreen></iframe>

13 Community Answers

Up Down

jherrieven

User  
1 rated :

This might be useful:

http://dev.powered-by-haiku.co.uk/solutions/jwioscaptions/

James Herrieven

Up Down

telescopio2014 N/A

User  
0 rated :

I tried using the code provided in the link you posted, and it seemed to be exactly like Youtube. However, it isn't working. Perhaps this has something to do with the background colours? All I know is that I copied the plugins to my server and even tried using theirs. No luck.

Here's my code:

*************
<div id="container"></div>
<script type="text/javascript">
var playerInstance = jwplayer("container");
playerInstance.setup({
image: "http://content.jwplatform.com/thumbs/3XnJSIm4-640.jpg",
file: "https://googledrive.com/host/0Bz47srLwNOKBYzBLd3h1aFFhWnM/B.mp4",
tracks: [{
file: 'http://googledrive.com/host/0Bz47srLwNOKBYzBLd3h1aFFhWnM/B.srt',
label: 'English',
kind: 'captions',
"default":true
}],
width: "100%",
aspectratio: "16:9",
key: "MY PRIVATE KEY",
"plugins":{
"https://googledrive.com/host/0Bz47srLwNOKBY2F5V3cySlpqa3c/jw7ios7fix.js":{},
"https://googledrive.com/host/0Bz47srLwNOKBY2F5V3cySlpqa3c/jwioscaptions.js":{}
}
});
</script>

************

P.S. You can try removing the jw7ios7fix.js link or these two from the source code of that dev-powered page:

*******
<div id="container"></div>
<script type="text/javascript">
var playerInstance = jwplayer("container");
playerInstance.setup({
image: "http://content.jwplatform.com/thumbs/3XnJSIm4-640.jpg",
file: "http://content.jwplatform.com/videos/3XnJSIm4-kNspJqnJ.mp4",
tracks: [{
file: 'tracks/vtt.txt',
label: 'English',
kind: 'captions',
"default":true
}],
width: "70%",
aspectratio: "16:9",
key: "gPTwDbR956DZAq9FUrjg/o9MhlrfAZlkkZSnpg==",
"plugins":{
"http://www.dev.powered-by-haiku.co.uk/solutions/jw7ios7fix/code/jw7ios7fix.js":{},
"http://www.dev.powered-by-haiku.co.uk/solutions/jwioscaptions/code/jwioscaptions.js":{}
}
});
</script>
************

It won't work either.

Subtitles are being displayed to my video. When I go fullscreen, they vanish. Funny thing is that when I enter that URL you posted, and go fullscreen in that video, it shows subtitles:

http://dev.powered-by-haiku.co.uk/solutions/jwioscaptions/

So either I am doing something wrong or they are using some special trick I haven't figured out yet.

And this is exactly what I needed... Can someone help me figure out what is going on?

Up Down

jherrieven

User  
0 rated :

You need to be using properly formatted WebVTT captions for iOS - not SRT.

Try adjusting your captions file and see if that works with the code you have.

James

Up Down

telescopio2014 N/A

User  
0 rated :

I did what you said, pasted the contents of my SRT here:
http://www.webvtt.org/

And changed the above code from B.srt to B.vtt.

Here's what happened:

1) In iOS, Safari can't display either the SRT or VTT. Don't know why.

2) In iOS, Chrome can display both SRT and VTT. But in either case, we can't see the subtitles appearing in fullscreen mode.

3) Using a PC, we are able to see both SRT and VTT, including seeing these subtitles in fullscreen mode.

*****

So the final conclusion is this:

* There must be some incompatibility with Safari, Google Drive and JWPlayer;

* There must be something special that makes these subtitles appear in fullscreen mode (in iOS) only for:
http://dev.powered-by-haiku.co.uk/solutions/jwioscaptions/

And never for the content I am trying to play here.

If you want to check for yourself, try using my code:

**********
*************
<div id="container"></div>
<script type="text/javascript">
var playerInstance = jwplayer("container");
playerInstance.setup({
image: "http://content.jwplatform.com/thumbs/3XnJSIm4-640.jpg",
file: "https://googledrive.com/host/0Bz47srLwNOKBYzBLd3h1aFFhWnM/B.mp4",
tracks: [{
file: 'http://googledrive.com/host/0Bz47srLwNOKBYzBLd3h1aFFhWnM/B.vtt',
label: 'English',
kind: 'captions',
"default":true
}],
width: "100%",
aspectratio: "16:9",
key: "MY PRIVATE KEY - INSERT YOURS HERE",
"plugins":{
"https://googledrive.com/host/0Bz47srLwNOKBY2F5V3cySlpqa3c/jw7ios7fix.js":{},
"https://googledrive.com/host/0Bz47srLwNOKBY2F5V3cySlpqa3c/jwioscaptions.js":{}
}
});
</script>

************

Up Down

jherrieven

User  
0 rated :

@telescopio2014

iOS safari is very particular about enforcing the security restrictions associated with cross domain / cross protocol asset loading.

As such, the VTT file will either need:

> to be served from the same domain/protocol as the page/media file;
> or will need to have the correct cross domain sharing headers (CORS) set

Additionally, I'm not sure GoogleDrive performing a 302 redirect on the VTT file will be helping matters.

If you can, start by hosting the file/media all under the same parent domain and see how that works out. It should work as per the Haiku example.

You can then start moving assets to alternative domains one by one if required, and at each step you can ensure that the configuration is right for that file being served from that domain.

James

Up Down

jherrieven

User  
0 rated :

@telescopio2014

I've updated the JW iOS Captions plugin to cater for the scenario where the VTT files are not hosted under the same parent domain but the CORS headers are correctly configured (as yours appear to be).

This can be seen in action here:

http://herrieven.net/jwplayer/debug/telescopio2014/

If you link to the latest version of the plugin (www.dev.powered-by-haiku.co.uk/solutions/jwioscaptions/code/jwioscaptions.js), it should resolve your issues without you having to make any other changes.

FYI: I've also included an update to cater for when cross-domain issues cannot be resolved. I'm offering this as an advanced (paid for) configuration option to the plugin - but you shouldn't need this!

James Herrieven

===================================================
Powered by Haiku
http://powered-by-haiku.co.uk/
---------------------------------------------------
Tatami for Online Video
http://dev.powered-by-haiku.co.uk/solutions/tatami/
---------------------------------------------------
skype: JamesHerrieven
email: james[at]haiku[dot]co[dot]uk
===================================================

Up Down

Daniel Berger

JW Player Support Agent  
1 rated :

Hi,

My name is Daniel and I am an iOS SDK Support Engineer here at JW Player. I would be happy to answer any iOS or SDK question you might have. Can you please clarify what your question is? I read the email thread but I am not quiet sure.

Thank you,
Daniel

Up Down

telescopio2014

User  
0 rated :

jherrieven, it seems you have introduced an anomaly.

For the record: all tests done in Chrome for iOS, and also using my code with the NEW jwioscaptions.js file uploaded to my Google Drive.

1) When I try to play that video without activating the CC button, the subtitle is being displayed anyway. So now there's no way to deactivate when we try to play in non-fullscreen mode.

2) Subtitle is being cut in half. Only half of all text is appearing. it wasn't like that before. And now it seems that two subtitles are superimposing each other.

3) When in fullscreen mode, only one subtitle can be seen. OK, now Chrome for iOS can display it in fullscreen mode... But, still, it's cut in half.

If you want to check all the inconsistencies I am having here, you will have to do the following:

a) Use Chrome for iOS. Don't verify this on Safari.
b) Use an iPAD.
c) Copy and paste this exact code in a blog post or website:

*************
<div id="container"></div>
<script type="text/javascript">
var playerInstance = jwplayer("container");
playerInstance.setup({
image: "http://content.jwplatform.com/thumbs/3XnJSIm4-640.jpg",
file: "https://googledrive.com/host/0Bz47srLwNOKBYzBLd3h1aFFhWnM/B.mp4",
tracks: [{
file: 'http://googledrive.com/host/0Bz47srLwNOKBYzBLd3h1aFFhWnM/B.vtt',
label: 'English',
kind: 'captions',
"default":true
}],
width: "100%",
aspectratio: "16:9",
key: "MY PRIVATE KEY - INSERT YOURS HERE",
"plugins":{
"https://googledrive.com/host/0Bz47srLwNOKBY2F5V3cySlpqa3c/jw7ios7fix.js":{},
"https://googledrive.com/host/0Bz47srLwNOKBY2F5V3cySlpqa3c/jwioscaptions.js":{}
}
});
</script>

************

Then, you will be able to see what exactly is going on. I was beginning to think the changes you did solved this problem, but it appears there is something wrong with my VTT or some further correction needs to be done.

@Daniel, the original question was directed towards the inability of iOS to display subtitles in fullscreen mode. jherrieven developed, from what I saw, the plugin that fixed this issue.

What I find odd is that when I try to play that video from his example page, everything looks fine. And even my video looks OK in a PC.

Now, when I try to do anything in iPAD/iOS, things look (pardon the expression) like SHIT. Except, of course, if we also use the iframe code from any embedded Youtube video with subtitles in it.

Up Down

telescopio2014

User  
0 rated :

A small correction to what I just wrote:

Subtitles are appearing OK in PC, but we are FORCED to watch with them anyway, too. We can't turn them off.

So this is a new bug that also affects PCs.

In Chrome for iOS, we can switch ON and OFF the CC button (highlighting is the precise term), even though it doesn't turn them off. In PC and Safari for iOS, the button is already OFF, yet the subtitle is appearing in PC and we can't get rid of it.

Up Down

telescopio2014

User  
0 rated :

**********
If you can, start by hosting the file/media all under the same parent domain and see how that works out. It should work as per the Haiku example.
**********

And for the record, I am aware that Google Drive is awful and probably this whole thing will never going to work in it, but in my case I have tons of data stored in it... So even if worked like you advised me to do, I have no choice in the matter.

I am able to add my subtitles to all my videos, and watch all of them perfectly with the SRT files embedded to these Google Drive videos.

What I can't do is to send them fullscreen using ANY BROWSER for iOS. And Google Drive's app from Apple-Store can't display subtitles.

So you see, the only way a user can watch a video fullscreen with subtitles using the iPAD is if the video came from Youtube.

And that is not an option if you are dealing with contents that can be taken down and detected by their content ID system.

It doesn't matter if you OWN the files and it's only doing a backup, to be watched by you, YT is not an option for that reason...

Google Drive is, because it is REALLY private, and not restricted like YT... Sadly, it has all the limitations you can see by now.

And Google developers aren't concerned about fixing them.

For further info on this matter, please read this thread:
http://www.ipadforums.net/threads/iframe-question.128962/

After reading this thread you will understand my dilemma.

Up Down

jherrieven

User  
0 rated :

Hi @telescopio2014

Could you try the latest version of the plugin (1.2).

Unfortunately I don't have an iPad capable of running JW7 (its an early version 1) and so it's hard to test out.

I've updated the plugin to only react with iOS/Safari/mobile scenarios and so hopefully that will remove the issue of duplicate captions.

In my experience, the JW controls appear to be purely for show when displayed on iOS mobile, the actual playback and switching on and off of the captions is controlled by the native fullscreen controls.

Let me know how this works out.

James

Up Down

telescopio2014

User  
0 rated :

The issue of duplicate caption is solved, but only for a PC environment. In iPAD/Safari, the player doesn't even load the subtitle. At least not in my case.

Up Down

aluc.utc

User  
0 rated :

@jherrieven hello, great plugin, but i still got problem on iphone
http://imgur.com/ubCARMg
http://imgur.com/EqeLYb1

This question has received the maximum number of answers.