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

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", "");
    })
  })
});

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

Create a buffering video on seek, pause or play

html

javascript

jquery

html5-video