如何在 ionic 应用程序中使用 Videogular 插件在视频上显示缩略图？答案

【问题标题】：How to show thumbnails on a video using Videogular plugin in ionic app?如何在 ionic 应用程序中使用 Videogular 插件在视频上显示缩略图？
【发布时间】：2017-03-19 22:14:53
【问题描述】：

我正在使用 Videogular 插件来创建一个离子应用程序。一切正常。但是我想显示视频的缩略图，但我不知道如何使用 videogular 来做到这一点。我看到一个例子是

 <vg-scrub-bar>
   <vg-scrub-bar-buffer></vg-scrub-bar-buffer>
   <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
   <vg-scrub-bar-thumbnails vg-thumbnails="Ctrl.thumbnails"></vg-scrub-bar-thumbnails>
 </vg-scrub-bar>

但上述缩略图代码仅在视频播放时才有效。我想在播放任何视频之前显示缩略图。

【问题讨论】：

也有同样的问题。你找到解决办法了吗？

标签： android ionic-framework video-thumbnails videogular

【解决方案1】：

您可以使用 HTML5 中提供的默认 poster 属性。

<vg-player>
    <video [vgMedia]="media" #media id="myVideo" preload="auto" controls>
       <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" poster="your-poster.jpg" type="video/mp4">
    </video>
</vg-player>

【讨论】：