时间戳

首页 > 解决方案 > 没有海报的视频html5的预览缩略图？角

javascript - 没有海报的视频html5的预览缩略图？角

问题描述

非常重要，我在 api 中没有 img。我需要在视频中设置预览缩略图。

      <video style="object-fit: contain;" width="100%" height="100%" controls preload="metadata"
        [poster]="indexOfSelectedExercise.exercise?.fullVideoUrl" loop>
        <source [src]="indexOfSelectedExercise.exercise?.fullVideoUrl" type="video/mp4" />
      </video>

fullVideoUrl：“https://www.url.com/images/Screen Recording 2020-12-01 at 19.01.52.mov”

这是网址的示例

标签： javascripthtmlangular

解决方案

如果您没有图像，则不要指定，这是没有poster意义的。（这需要一种图像格式，所以只给它你的视频文件 URL 是没有意义的。）

您只能设置preload为autothen，希望浏览器开始加载视频，并在可用时使用第一帧呈现预览。

（如果将其用于大型视频或页面上的多个视频，这可能会带来流量/带宽甚至性能问题，应该很清楚。）

推荐阅读