如何創建視頻縮略圖

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>