如何创建一个视频的缩略图

Question

我需要在我videogular2缩略图。

我要创建我的视频缩略图/海报。目前，它只能说明与黑色的屏幕和一个vg-poster播放/暂停按钮不起作用。

这里是我的代码：

 <vg-player>
  <vg-overlay-play></vg-overlay-play><vg-controls vg-autohide="false">                                        
  <vg-play-pause></vg-play-pause>
  <vg-mute></vg-mute>
  </vg-controls><vg-poster vg-url="https://www.almanac.com/sites/default/files/styles/primary_image_in_article/public/image_nodes/sunflower-1627193_1920.jpg?itok=RUilemL3"></vg-poster>
<video height="200px" width="100%" [vgMedia]="media" #media src="{{server_path}}{{imgVid.data_path}}" id="singleVideo"                                        
autoplay></video>
</vg-player>

Answer 1

在HTML 5 video标签有一个poster属性。从W3Schools的：

指定而视频被下载到被显示的图像，或直到用户点击播放按钮。如果不包括，则视频的第一帧将被用来代替。

在您的例子就应该是这样的：

<video 
  poster="https://www.almanac.com/sites/default/files/styles/primary_image_in_article/public/image_nodes/sunflower-1627193_1920.jpg" 
  height="200px" 
  width="100%" 
  [vgMedia]="media" 
  #media 
  src="{{server_path}}{{imgVid.data_path}}" 
  id="singleVideo"
  autoplay>
</video>