如何在videogular2中生成视频缩略图？vg-poster失效解决

我之前也碰到过一模一样的问题，给你几个关键修复步骤，应该能搞定海报图不显示的情况：

1. 移除video标签的autoplay属性 #

你当前代码里的video加了autoplay，这会让浏览器尝试立即启动视频播放（哪怕现在多数浏览器需要用户交互才能允许自动播放），不管视频加载快慢，海报图都会被直接覆盖，自然看不到了。

2. 正确绑定vg-poster的图片地址 #

Videogular2的vg-poster组件的vg-url是Angular输入属性，得用属性绑定语法[vg-url]来传递值，而不是直接写vg-url="..."。把你的海报标签改成这样：

<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>

3. （可选）添加样式确保海报图正常显示 #

有时候海报图会因为默认样式问题被隐藏，你可以在全局样式或者组件样式里加这段CSS：

vg-poster {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

修改后的完整代码 #

<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"></video>
</vg-player>

做完这些修改后，海报图应该就能正常显示在视频上方，直到用户点击播放按钮为止。如果还是不行，你可以先检查一下海报图的URL是否能正常访问，确保没有跨域或者404的问题。

内容的提问来源于stack exchange，提问作者Alonetech