全屏黑色mediaelementjs 2.16.2版答案

【问题标题】：Fullscreen black mediaelementjs version 2.16.2全屏黑色mediaelementjs 2.16.2版
【发布时间】：2014-11-16 18:11:40
【问题描述】：

我无法在 2.16.2 版本中制作全屏视频。屏幕变黑并显示“视频播放器”有什么解决办法吗？

【问题讨论】：

标签： jquery css video fullscreen mediaelement.js

【解决方案1】：

从 v2.16.x 开始，MEJS 在 fullscreen 图层上插入一个全宽 span，该图层继承了一个实心 background-color（在 Firefox / 中为黑色白色 Chrome）：

<span class="mejs-offscreen mejs-video mejs-container-fullscreen" style="width: 100%; height: 100%;">Video Player</span>

作为一种解决方法，您可以在自定义 CSS 中设置以下任何 CSS 规则：

span {
  background-color: transparent;
}

... 或（包含 MEJS CSS 文件后）：

.mejs-offscreen {
  background-color: transparent;
}

mediaelement.js 页面在其reset.debug.css 文件的第 40 行有此 CSS 规则：

span {
  background: none repeat scroll 0 0 transparent;
  ...
}

所以问题不会发生。

【讨论】：

对我不起作用，试试你在chrome浏览器中说的但不起作用。

【解决方案2】：

添加

.mejs-offscreen {
  ...
  display: none;
}

在您的 mediaelementplayer.css 或您用作 Mediaelement.js 的 CSS 的任何内容中，适用于 Firefox，但不适用于 Chrome。

添加类似的东西

.mejs-offscreen {
  background-color: transparent;
}

在全屏模式下禁用控件，因为这个跨度（使用 mejs-offscreen 类）与它重叠。他们只是在新版本中不知何故犯了错误，测试不好等等。

我通过编辑 mediaelement-and-player.js 的源代码找到了解决方法。关于 #2219 行的代码如下所示：

$('<span class="mejs-offscreen">' + videoPlayerTitle + '</span>'+
+ '<div id="' + t.id + '" class="mejs-container ' + (mejs.MediaFeatures.svg ? 'svg' : 'no-svg') +

您应该避免插入第一个跨度，因此代码将如下所示：

            $('<div id="' + t.id + '" class="mejs-container ' + (mejs.MediaFeatures.svg ? 'svg' : 'no-svg') +

请记住，此跨度的目的是为屏幕阅读器用户提供可访问性功能，因此它是一些其他方式来超越它。

关于这个问题的更多信息在这里：issue #1372

【讨论】：

我想this commit 中提出的更改对我来说确实更有意义。