当用户通过 PHP 剪辑一段视频时,我们会动态生成缩略图。
为了做到这一点,当部分被剪辑时,我们通过 ajax 向服务器发送一些信息,它调用 ffmpeg 生成缩略图,然后在生成缩略图时最终返回给我们,因此我们可以使用 twitter 在视频剪辑器下方显示它引导程序的缩略图。
这是用户在等待缩略图时看到的基本示例:http: //jsfiddle.net/Rnt9N/2/
显然不好,看起来很乱。所以我们想要的是让微调器在水平和垂直方向上居中,并且还可以缩放(因为缩略图是响应式的,我们需要微调器能够增长)。
这只是基本的 htmt,但显然我需要在此处包含代码:
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<ul class="thumbnails">
<li class="span2"><a href="#" class="thumbnail">
<i class="icon icon-spin icon-spinner"></i>
</a>
</li>
<li class="span2"><a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span2"><a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span2"><a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span2"><a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span2"><a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span2"><a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span2"><a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span2"><a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
</ul>
</div>
</div>
</div>