Создание заставки, если загружается видеосфера - PullRequest
Новая
       14

Создание заставки, если загружается видеосфера

0 голосов
/ 06 сентября 2018

Hiho Community,

Я пытаюсь показать заставку, если загружается моя видеосфера. Я использую этот код -> установить анимацию загрузки с a-frame для загрузки всплеска перед сценой, и он отлично работает, но мне нужно, чтобы мои видео имели предварительную загрузку атрибута, поэтому, если я их запускаю, им нужно некоторое время для загрузки, и там должен снова появиться заставка. Некоторые идеи (может быть, второй слушатель, который говорит: показать заставку, если загрузка видео)?

HTML: 

<body>
 <div id="splash">
   <div class="loading"></div>
 </div>

 <a-scene>
   <a-assets>
     <video id="vid" loop="false" preload="none" 
      crossorigin="anonymous">
          <source type="video/mp4" src="..." />
     </video>
   </a-assets>

   <a-videosphere src="#vid"></a-videosphere>

 </a-scene>
</body>

CSS: 

#splash {
  position: absolute;

  display: flex;
  align-items: center;
  justify-content: center;

  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  width: 200px;
  height: 200px;

  margin: auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0.25rem solid rgba(255, 255, 255, 0.2);
  border-top-color: white;
  animation: spin 1s infinite linear;
}

JavaScript: 

document.addEventListener('DOMContentLoaded', function() {
    var scene = document.querySelector('a-scene');
    var splash = document.querySelector('#splash');
    scene.addEventListener('loaded', function (e) {
        splash.style.display = 'none';
    });
});

Ответы [ 2 ]

0 голосов
/ 12 сентября 2018

как это? @ Дан С. 

  // The video element
  var videoEl_1 = document.querySelector('#intro');
  var videoEl_2 = document.querySelector('#dach');
  var videoEl_3 = document.querySelector('#door');
  var videoEl_4 = document.querySelector('#grube');
  var videoEl_5 = document.querySelector('#schleifen');
  var videoEl_6 = document.querySelector('#outro');

  // Define interval in milliseconds
  var interval = 1000;

function checkVidState( videoEl_1, interval ) {

  // Check readyState immediately
  checkVidState();

  // Function to detect if video has enough data to play
  function checkVidState() {

    if (videoEl_1.readyState === 4) {
      removeSplash_2();
      return true;
    }

    /*if (videoEl_2.readyState === 4) {
      removeSplash_2();
      return true;
    }

    if (videoEl_3.readyState === 4) {
      removeSplash_2();
      return true;
    }

    if (videoEl_4.readyState === 4) {
      removeSplash_2();
      return true;
    }

    if (videoEl_5.readyState === 4) {
      removeSplash_2();
      return true;
    }

    if (videoEl_6.readyState === 4) {
      removeSplash_2();
      return true;
    }*/

    // If readyState !== 4, check again at set interval
    setTimeout(checkVidState, interval);
    return false;
  }

  // Function for removing splash
  function removeSplash_2() {
    var splash_2 = document.querySelector('#splash_2');
    splash_2.style.display = 'none';
  }
}

<a-box onclick="checkVideoState( videoEl_1, interval );"></a-box>
<a-box onclick="checkVideoState( videoEl_2, interval );"></a-box>
...
0 голосов
/ 06 сентября 2018

Есть много способов сделать это с разными уровнями сложности. По моему опыту, проблема с видео заключается в том, что браузеры редко полностью загружают видео; они загружаются только до определенной точки, пока пользователь не увидит видео движений игровой головки.

Я заметил, что вы установили preload="none" в своем видео; Я хотел бы рассмотреть вопрос об изменении этого на preload="auto".

Если у вас есть сетевое соединение, самый простой способ, который я могу придумать, - это проверить readyState видео через определенные промежутки времени. Я пытался сделать это на событии loadeddata с противоречивыми результатами, поэтому я не могу рекомендовать это.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState

Вы можете попробовать что-то вроде этого (желательно в системе или компоненте A-Frame): 

// The video element
var video = document.querySelector('#vid');

// Define interval in milliseconds
var interval = 1000;

// Check readyState immediately
checkVidState();

// Function to detect if video has enough data to play
function checkVidState() {

  if (video.readyState === 4) {
    removeSplash();
    return true;
  }

  // If readyState !== 4, check again at set interval
  setTimeout(checkVidState, interval);
  return false;

}

// Function for removing splash
function removeSplash() {
  // Logic for removing splash here...
}

Если вам нужно сделать это для нескольких видео и не использовать компоненты A-Frame, вы можете определить функцию следующим образом: 

function checkVidState( video, interval ) {
  // Same inner code as above
}

Вам просто нужно передать элемент видео и значение интервала проверки.

Затем вызывайте их для каждого видеоэлемента или просматривайте их массив: 

checkVideoState( video1, interval ); // or time in milleseconds
checkVideoState( video2, interval );
. . .
...