HTML5 视频：全屏字幕

Posted 2023-03-07

【中文标题】HTML5 视频：全屏字幕

【英文标题】：HTML5 video: fullscreen subtitles

【发布时间】：2012-04-04 09:22:49

【问题描述】：

是否可以在全屏模式下在 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);
;

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

这种行为是设计使然、错误还是我遗漏了什么？

【参考方案1】：

firefox 的本机全屏模式（使用 fullscreen-api）隐藏除了您请求全屏的元素之外的所有内容，无论 z-index 是什么。 不过，解决方案非常简单：在视频和其他内容（例如字幕）周围包裹一个 container-div，然后为该容器请求全屏。

在任何时候都尊重 z-index-values 的 chrome 中不会出现此问题

【讨论】：

Chrome 的最新 windows 版本 (18.0.1025.142 m) 使用 RP 播放带有 HTML5 的 mp4 视频（甚至不显示全屏按钮...）。 ogv 视频甚至没有播放...

而且，对不起，当你说“请求全屏”时我不明白......我的代码没有请求全屏，用户可能会要求全屏点击 html5 工具栏全屏按钮，所以我对此没有任何控制权...

hm，这里可能存在误解：我假设您在视频中添加了自己的控件 - 不是这样吗？您能否提供更详细的代码示例（例如在 jsfiddle 中？）

当然，抱歉（当时是在复活节假期... ;-)，请参阅jsfiddle.net/marcolino/xHazS（希望对您有所帮助，我从页面源代码进行了复制粘贴，这很混乱... :-()

这太杂乱了，无法直视 :( 为了到达某个地方，我建议您查看好的 html5 播放器，例如 mediaelementjs.com - 它使用自定义控件，从而提供对正在发生的事情的高级控制.

【参考方案2】：

你能做一些涉及视频和画布的魔术吗？ http://html5doctor.com/video-canvas-magic/

【讨论】：

嗨！我确实使用类似于 html5doctor 的方法进行了测试（仅在视频上使用画布而不是反向），但全屏没有成功。这个问题似乎在***.com/questions/9461453/… 中得到了解决，但即使使用 z-index:Integer.MAX_VALUE 我也没有成功...

【参考方案3】：

我建议尝试支持全屏的playr（显然 - 我自己还没有实际测试过这部分）。

【讨论】：

嗨！我做了测试播放器，他们做了全屏字幕。不过，他们使用 SubRip/WebVTT 轨道，我认为它们不太适合 live 注入。但我可能是错的......

我没有尝试过，虽然我不明白为什么他们不会？

【参考方案4】：

在 Chrome 中开箱即用

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