全屏 HTML5 视频自定义控制器

Posted 2023-05-07

【中文标题】全屏 HTML5 视频自定义控制器

【英文标题】：HTML5 Video custom controller in full screen

【发布时间】：2014-07-16 06:59:28

【问题描述】：

html5 视频全屏自定义控制器未在 Mozilla Firefox 中正确显示。

演示http://athimannil.com/player/

:-webkit-full-screen #skinn
  width: 100%;
  height: 100%;

:-moz-full-screen #skinn
  width: 100%;
  height: 100%;

:-ms-fullscreen #skinn
  width: 100%;
  height: 100%;

:fullscreen #skinn
  width: 100%;
  height: 100%;

【问题讨论】：

为我工作：在 MacBook Pro 上FF 29.0.1

@aldanux 是浏览器中 100% 的宽度吗？

是的，唯一的问题是您的controller 不会消失

@aldanux 是的，它不像其他浏览器那样工作:(

我现在在 FF 29.0.1 的 iMac 26" 上进行了测试 - 相同：宽度：100% 是完美的，但控制器不会消失

【参考方案1】：

您将 kuttuPlayer（即#player1）作为您的全屏元素。 #skinn 不是全屏元素的子元素。因此 CSS 选择器不匹配。不要忘记，全屏视图中可能只有 DOM 的一部分。

尝试类似：

#skinn:-moz-full-screen-ancestor 
  bottom: 0;
  position: absolute;
  width: 100%;

【讨论】：

而 gecko 和 webkit 的区别记录在这里：developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/…