从YouTube等数据库加载视频时,如何显示加载gif

时间:2019-01-05 08:32:16

标签: javascript jquery html5

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>

任何人都可以帮助我,以上是我的代码。 谢谢STACKOVERFLOW

1 个答案:

答案 0 :(得分: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>