Как создать миниатюру видео

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>