HTML5 視頻：全屏字幕

Question

是否可以在全屏模式下在 HTML5 視頻控件上顯示字幕？

我可以在 window 模式下顯示它們（例如在 FF 11.0 上），使用略微修改的cuepoint.js版本來顯示“實時”字幕：

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

但是，當用戶進入全屏時，字幕不顯示......當回到 window 模式時，它們會再次顯示。

這種行為是設計使然，是一個錯誤，還是我錯過了什么？

Answer 1

你能做一些涉及視頻和 Canvas 的魔術嗎？ http://html5doctor.com/video-canvas-magic/

Answer 2

我建議嘗試支持全屏的播放器（顯然 - 我自己並沒有實際測試過那部分）。

Answer 3

firefox 的本機全屏模式（使用全屏 api）隱藏除了您請求全屏的元素之外的所有內容，而不管 z-index 的。 不過，解決方案非常簡單：將視頻和其他內容（例如字幕）包裹在容器 div 周圍，然后請求該容器全屏顯示。

在任何時候都尊重 z-index-values 的 chrome 中不會出現該問題

Answer 4

在 Chrome 中開箱即用

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