Vue / Nuxt - 如何在视频元素中显示“海报”

问题描述

我有一个视频要显示在我的 Nuxt 应用中。将视频 poster 属性指向图像时，它不会显示。作为测试，我创建了一个指向同一位置的图像元素并显示图像。

问题

如何显示视频的海报？

<div>
  <video controls preload="none" poster="../static/images/videoposter.png">
    <source src="../static/video/Websitemp4.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
 </video>
</div>

解决方法

如果图像的路径是 /static/images/video poster.png，则使用 src="/images/videoposter.png"

您不需要像代码示例中那样使用相对路径。