html - 视频导致 Firefox 滞后?

标签 html css firefox video

所以我网站的一个页面上有很多视频。它有一个大的作为背景,大约 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>

最佳答案

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

  1. 减小文件大小,使用 Javascript 可以在 firefox 上调用质量较低的视频(不打算提供示例,因为这不是问题所问的)。
  2. 限制您的网站使用 chrome,这是一个可编码的解决方案。
  3. 买一台更好的电脑。
  4. 将鼠标悬停在“选项”>“高级”>“常规”>“浏览”>“启用勾选”上,使 Firefox 能够使用 GPU。 (评论中的@Marcos Perez Gude 提供了这个替代方案,向您大喊大叫)。

关于html - 视频导致 Firefox 滞后?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37192626/

相关文章:

javascript - 为什么此网页无法完成加载?

html - 为什么重新加载页面时该复选框保持选中状态?

php - 使用php从mysql数据库导出一个csv文件

html - 全有背景有固定内容

javascript - 如何使用 js 库使用两个输入 x 和 y 值绘制图形?

html - 使用 html 和下拉菜单 html css 的 Img 排序

css - 如何在 bootstrap 2.3.2 中更改字体颜色

html - 段落文字溢出页面

html - v-如果没有按预期表现

javascript - 检测 Firefox 扩展版本