Как я могу показать загрузку GIF при загрузке видео из базы данных, как YouTube

Question

Хочу Нравится

  <script>
$("video").on("click", function() {

// All but not this one - pause
$("video").not( this ).each(function() {
     this.pause();

});
// Play this one
// this.play();

// Or rather toggle play / pause
this[this.paused ? "play" : "pause"]();

});

<video id=”myVideo” src="<?php echo $_REQUEST['video']; ?>"></video>

любой может помочь мне, пожалуйста, выше мой код. Спасибо STACKOVERFLOW

Answer 1

Используйте атрибут poster и класс, чтобы добавить стиль и удалить их в событии canplay.

$('video').on('loadstart waiting seeking stalled', function (event) {
  $(this).addClass('loading');
});
$('video').on('canplay seeked play', function (event) {
  $(this).removeClass('loading');
});

video.loading {
  background: black url(/images/loader.gif) center center no-repeat;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<video src="/videos/movie.mp4" poster="/images/poster.jpg" controls></video>