创建一个寻找、暂停或播放的缓冲视频

Question

我想创建一个缓冲gif当用户寻找，播放或暂停视频。我能成功一点，但我不知道如何做到这一点。这是我的代码。

HTML:

<div class="row text-center">
        <video width="320" height="240" controls id="video1" onplay="buffer(this.id)" poster="" class="">
            <source src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
    <br/>
    <div class="row text-center">
        <video width="320" height="240" controls id="video2" onplay="buffer(this.id)" poster="" class="">
            <source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>

CSS:

video.loading {
        background: black url("img/loader_old.gif") center center no-repeat;
        z-index: 300000 !important;
    }

JQUERY:

function buffer(id){
    $('#'+id).on('loadstart', function (event) {
        $(this).addClass('loading');
    });
    $('#'+id).on('canplay', function (event) {
        $(this).removeClass('loading');
        $(this).attr('poster', '');
    });
}

Answer 1

您可以在html事件时将poster属性的值设置为.gif，在canplay事件时删除值，其中调用$(this).attr('poster', '');

<div class="row text-center">
  <video width="320" height="240" controls id="video1" poster="img/loader_old.gif" class="">
    <source src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4" type="video/mp4">
      Your browser does not support the video tag.
  </video>
</div>
<br/>
<div class="row text-center">
  <video width="320" height="240" controls id="video2" poster="img/loader_old.gif" class="">
    <source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4">
      Your browser does not support the video tag.
  </video>
</div>

$(function() {
  $("video").each(function() {
    $(this).on("canplay", function (event) {
        $(this).attr("poster", "");
    })
  })
});