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?

Answer 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

Answer 2

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

Answer 3

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

Answer 4

In Chrome works out of the box

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