全屏黑色mediaelementjs版本2.16.2

Question

我无法在2.16.2版本中制作全屏视频。屏幕变黑，并说＆＃34;视频播放器＆＃34;任何解决方案？

Answer 1

从v2.16.x开始，MEJS在全屏层上插入一个全宽span，继承实体background-color（黑色在Chrome中的Firefox / 白色中：

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

所以问题不会发生。

Answer 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') + 

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

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

请记住，此范围的目的是为屏幕阅读器用户提供辅助功能，因此可以通过其他方式来超越此范围。

有关此问题的更多信息，请访问：issue #1372