HTML5視頻：全屏字幕

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

我可以向他們展示（例如在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); 
};

但，當用戶進入全屏，字幕不顯示...當回到窗口模式時，他們再次顯示。

這是行爲的設計，一個錯誤，或者我錯過了什麼？

來源

2012-04-04 MarcoS

firefox的原生全屏模式（使用全屏api）會隱藏除全屏所請求的元素外的所有元素，而不管z-index是什麼。雖然解決方案非常簡單：將視頻和其他內容（例如字幕）包裝在容器div中，然後請求該容器的全屏。

在Chrome不會出現問題，其在任何時候尊重的z-index值

來源

2012-04-05 08:33:47

最新的Windows版本的Chrome（18.0.1025.142米）使用RP來播放帶有HTML5的MP4視頻（甚至沒有顯示全屏按鈕...）。 ogv視頻甚至沒有播放... – MarcoS 2012-04-05 12:33:38

而且，對不起，當你說「請求全屏」時，我不明白...我的代碼不要求全屏，用戶希望要求全屏點擊html5工具欄全屏按鈕，所以我沒有任何控制... – MarcoS 2012-04-05 12:36:00

嗯，也許這裏有一個誤解：我認爲你添加了你自己的控制視頻 - 是不是這樣？你可以提供一個更詳細的代碼示例（例如在jsfiddle？） – 2012-04-07 18:28:41

你可以做一些魔術，涉及視頻和畫布？ http://html5doctor.com/video-canvas-magic/

來源

2012-04-04 09:30:23 Lloyd

嗨！我確實使用類似於html5doctor的方法進行了測試（僅使用畫布而不是視頻而不是反向），但在全屏模式下沒有成功。這個問題似乎解決http://stackoverflow.com/questions/9461453/is-there-a-way-to-overlay-a-canvas-over-a-fullscreen-html5-video，但我甚至沒有成功usinz z-index：Integer.MAX_VALUE ... – MarcoS 2012-04-04 10:40:04

我建議嘗試playr它支持全屏（顯然 - 我沒有真正測試過它自己的那部分）。

來源

2012-04-04 09:33:23

嗨！我測試過播放器，他們做全屏幕標題。雖然，他們使用SubRip/WebVTT曲目，我認爲它不適合* live *注入。但我可能是錯的... – MarcoS 2012-04-04 10:45:15

我還沒有嘗試，雖然我不明白爲什麼他們不會？ – 2012-04-04 11:20:59

在Chrome瀏覽器的開箱

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

來源

2013-02-08 22:52:42 fguillen

HTML5視頻：全屏字幕

回答

相關問題