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

您可以在poster将.gif属性的值设置为html，移除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", "");
    })
  })
});

在搜索，暂停或播放时创建缓冲视频

1 个答案: