Vue / Nuxt - 如何在视频元素中显示 "poster"

Question

我有一个视频要显示在我的 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>

Answer 1

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

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

Vue / Nuxt - 如何在视频元素中显示 "poster"

Vue / Nuxt - How to display a "poster" in a video element

video

poster

vue.js

nuxt.js