HTML5 video: fullscreen subtitles

Question

Is it possible to show subtitles on an HTML5 video control in fullscreen mode?

I can show them (for example on FF 11.0) in window mode, with a slightly modified version of cuepoint.js to show "live" subtitles:

Cuepoint.prototype.addLiveSlide = function(html) {
    var self;
    this.html = html;
    self = this;
    return this.video.addEventListener("timeupdate", function() {
        return self.update(html);
    },
    false);
};

But, when user goes fullscreen, subtitles do not show... When back to window mode, they do show again.

Is this behaviour by design, a bug, or do I miss something?

score 1 · Answer 1 · answered Apr 04 '12 at 09:30

1

could you do some magic involving Video and Canvas? http://html5doctor.com/video-canvas-magic/

answered Apr 04 '12 at 09:30

Lloyd

8,204
2
38
53

Hi! I did make a test using an approach similar to that of html5doctor (only using canvas over video instead of reverse), but no success with fullscreen. This issue seems addressed in http://stackoverflow.com/questions/9461453/is-there-a-way-to-overlay-a-canvas-over-a-fullscreen-html5-video, but I had no success even usinz z-index:Integer.MAX_VALUE... – MarcoS Apr 04 '12 at 10:40

score 1 · Answer 2 · answered Apr 04 '12 at 09:33

1

I suggest trying playr which supports full screen (apparently - I've not actually tested that part of it myself).

answered Apr 04 '12 at 09:33

Ian Devlin

18,534
6
55
73

Hi! I did test playr, and they do fullscreen captions. Though, they use SubRip/WebVTT tracks, which I suppose are not well fitted for *live* injection. But I could be wrong... – MarcoS Apr 04 '12 at 10:45
I've not tried that although I don't see why they wouldn't be? – Ian Devlin Apr 04 '12 at 11:20

score 1 · Accepted Answer · answered Apr 05 '12 at 08:33

1

firefox's native fullscreen-mode (using the fullscreen-api) hides everything but the element you requested fullscreen for regardless of z-index's. the solution is quite easy though: wrap a container-div around the video and other content (such as the subtitles) and request fullscreen for that container instead.

the problem does not occur in chrome which respects z-index-values at any time

answered Apr 05 '12 at 08:33

Jörn Berkefeld

2,540
20
31

Latest windows verion of Chrome (18.0.1025.142 m) uses RP to play mp4 video with HTML5 (which doesn't even show the fullscreen button...). ogv video is not even played back... – MarcoS Apr 05 '12 at 12:33
And, sorry, I don't understand when you say "request fullscreen"... My code does not request fullscreen, the user is espected to ask for fullscreen clicking on the html5 toolbar fullscreen button, so I don't have any control on that... – MarcoS Apr 05 '12 at 12:36
hm, maybe there is a misunderstanding here: I assumed you added your own controls to the video - is that not the case? could you provide a more detailed code-example (e.g. in jsfiddle?) – Jörn Berkefeld Apr 07 '12 at 18:28
Of course, sorry (was on Easter holiday... ;-), see http://jsfiddle.net/marcolino/xHazS/ (hope it helps, I did a copy'n paste from page source, it's quite confused... :-() – MarcoS Apr 10 '12 at 10:41
that's way too messy to look thru :( for the sake of getting somewhere I suggest you look into good html5 players such as http://mediaelementjs.com/ - it uses custom controls and thereby provides advanced control over whats going on. – Jörn Berkefeld Apr 11 '12 at 08:31

score 0 · Answer 4 · answered Feb 08 '13 at 22:52

0

In Chrome works out of the box

http://fguillen.github.com/ChromeVideoSubsStyle/

answered Feb 08 '13 at 22:52

fguillen

36,125
23
149
210

HTML5 video: fullscreen subtitles

4 Answers4