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>

如何制作视频缩略图

1 个答案: