Я пытаюсь остановить фоновый gif, когда я нахожусь в другом окне, потому что он использует ресурсы, есть ли способ остановить это, когда тело не обнаруживает движение мыши или наведение курсора.

Мы будем очень признательны за объяснение того, как это делается.

body {
  background: url('https://i.pinimg.com/originals/f1/63/11/f16311fd0c32786525f471c685bc516e.gif') no-repeat center center fixed;
  background-size: cover; 
  height: 100%
  width: 100%
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Background GIF</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>
2
Miah Tayen 10 Фев 2021 в 02:25

1 ответ

Лучший ответ

Как упомянул @NVRM, «будет намного проще использовать видео», следуя этому совету, я использовал ezgif, чтобы преобразовать gif в видеоформат mp4, что значительно упростило задачу.

Я использовал функцию window.onload для автоматического воспроизведения видео при его первом открытии.

Оттуда я мог бы использовать document.onmouseout, чтобы приостановить видео, когда курсор находится вне тела / документа, и возобновить видео, когда курсор находится в теле / ​​доценции с помощью document.onmousemove. onmousemove также позволяет возобновить воспроизведение видео, когда оно приостановлено из-за отсутствия движения мыши.

Чтобы обнаружить отсутствие движения мыши, я использовал этот код, в котором используется функция setInterval(), чтобы определить, не работает ли мышь. t перемещается в определенный промежуток времени, если это так, он выполнит код внутри функции, которая в данном случае приостановит воспроизведение видео.

Чтобы очистить функцию детектора отсутствия мыши, когда мышь находится вне этого окна, я использовал clearInterval() внутри функции document.onmouseout, иначе он все время думает, что мышь не движется, когда она не внутри тело / документ, трата ресурсов.

const video = document.getElementById("background");

window.onload = function() {
  video.play();
};

document.onmouseout = function() {
  video.pause()
  clearInterval(timeout);
};

document.onmousemove = function() {
  video.play();
};

var timeout;
document.onmouseover = function () {
  clearInterval(timeout);
  timeout = setInterval(function () { 
    video.pause();
  }, 8888); 
}
* {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#background {
  position: absolute;
  top: 50%; 
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto;
  z-index: -1000; 
  transition: 0.2s;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Background Test</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js" defer></script>

    <video  muted loop preload="auto" id="background">
      <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
    </video>
    
    
  </body>
</html>
0
Miah Tayen 11 Фев 2021 в 19:07