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); 
};

但，当用户进入全屏，字幕不显示...当回到窗口模式时，他们再次显示。

这是行为的设计，一个错误，或者我错过了什么？

答

firefox的原生全屏模式（使用全屏api）会隐藏除全屏所请求的元素外的所有元素，而不管z-index是什么。虽然解决方案非常简单：将视频和其他内容（例如字幕）包装在容器div中，然后请求该容器的全屏。

在Chrome不会出现问题，其在任何时候尊重的z-index值

最新的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/

嗨！我确实使用类似于html5doctor的方法进行了测试（仅使用画布而不是视频而不是反向），但在全屏模式下没有成功。这个问题似乎解决http://*.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它支持全屏（显然 - 我没有真正测试过它自己的那部分）。

嗨！我测试过播放器，他们做全屏幕标题。虽然，他们使用SubRip/WebVTT曲目，我认为它不适合* live *注入。但我可能是错的... – MarcoS 2012-04-04 10:45:15

我还没有尝试，虽然我不明白为什么他们不会？ – 2012-04-04 11:20:59

答

在Chrome浏览器的开箱

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

HTML5视频：全屏字幕

相关推荐