视频导致 Firefox 滞后？答案

【问题标题】：Video causes Firefox to lag?视频导致 Firefox 滞后？
【发布时间】：2016-09-08 15:00:00
【问题描述】：

所以我网站的一页视频很重。它有一个大的作为背景，大约有 4 个小盒子。在 Chrome 中，这很好用，没有任何问题。但在 Firefox 中，它的滞后性使整个界面难以使用。
现在，我怀疑这可能是因为 Firefox 不使用 GPU，但我当然不确定，也可能是代码。

我正在使用 mp4 视频。这是代码：

.video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
opacity:0.2;
transform: translateX(-50%) translateY(-50%);
}

<video loop muted autoplay poser="bootstrap/img/lp_header.png" class="video">
<source src="bootstrap/video/game_hub_bg2.webm" type="video/webm">
</video>

【问题讨论】：

I suspect this might be due to the fact that Firefox doesn't use the GPU。你错了。转到选项 > 高级 > 常规 > 浏览 > 勾选（勾选）“可用时使用硬件加速”。
考虑用图像占位符替换您的视频，一旦点击，这些占位符就会动态替换为视频。
硬件加速的确切属性取决于操作系统、firefox 版本、可用硬件和 about:config 中的一些实验性开关。 AIUI 对不透明图层进行了一些优化。所以设置不透明度值 1 可能是导致它的原因。

标签： html css firefox video

【解决方案1】：

没有对此的可编码解决方案，但是有一些替代方案。

减小文件大小，使用 Javascript 您可以在 Firefox 上调用质量较低的视频（不提供示例，因为问题不是这样）。
限制您的网站使用 chrome，这是一个可编码的解决方案。
买一台更好的电脑。
通过悬停选项 > 高级 > 常规 > 浏览 > 启用勾选启用 Firefox 以使用 GPU。（cmets 中的@Marcos Perez Gude 提供了这个替代方案，向您大声疾呼）。

【讨论】：

"限制您的网站使用 chrome，这是一个可编码的解决方案。" - 这是相当不利于用户的建议。您没有从 “在 IE6 上表现最佳” 时代学到什么吗？