从 youtube 等数据库加载视频时，如何显示加载 gif

Question

I Want to Like This

  <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>

任何人都可以请帮助我上面是我的代码。 感谢堆栈溢出

Answer 1

使用海报属性和类添加一些样式，并在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>