Angular cloudinary 自动播放具有响应宽度/高度的视频

Question

我有一个视频正在我的网站上播放，设置如下：

<video #video [muted]="true" playsinline autoplay loop id="video">
    <source [src]="section.backgroundVideo" type="video/mp4">
</video>

CSS 使它成为背景视频，如下所示：

#video {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
}

我正在使用 Angular Cloudinary 库，并且一直在努力让它发挥同样的作用。 我的 HTML 如下所示：

<cl-video public-id="Situ-Sizzler-Web-Clip-v05-01_auvu5o" fetch-format="auto" effect="volume:mute"
    flags="streaming_attachment" autoplay id="video" #video>

</cl-video>

有时它会播放，但大多数时候它只是加载海报图像而从不播放视频。 如果我删除 CSS 并将 html 更改为：

<cl-video public-id="Situ-Sizzler-Web-Clip-v05-01_auvu5o" fetch-format="auto" effect="volume:mute"
        flags="streaming_attachment" autoplay controls id="video" #video>

</cl-video>

我可以按下播放按钮，它就会播放。是不是我做错了什么？

另外，如果它可以根据分辨率调整大小，我会很高兴。有谁知道如何做到这一点？有了图片，你可以添加responsive，但我找不到任何视频。

---

我以为我找到了解决办法。我尝试手动将生成的 URL 添加到视频元素，并注意到它有类似的问题。 玩了一会儿，我发现了这个：

Tell whether video is loaded or not in Javascript

然后导致我这样做：

Checking if a html5 video is ready

但最后我发现视频不允许自动播放，除非它被静音。我最初使用了属性autoplay muted，但正如你所见，我在我的 cl-video 中没有这样做（只是自动播放）。 所以我把我的 cl-video 改成了这样：

<cl-video public-id="Situ-Sizzler-Web-Clip-v05-01_auvu5o" fetch-format="auto" autoplay="true" muted="muted"
    id="video" #video>

</cl-video>

现在它的工作频率更高了，但有时还是不能自动播放.....

Answer 1

我似乎已经解决了这个问题。我尝试手动将生成的 URL 添加到视频元素，并注意到它有类似的问题。 玩了一会儿，我发现了这个：

Tell whether video is loaded or not in Javascript

然后导致我这样做：

Checking if a html5 video is ready

但最后我发现除非静音，否则视频将不允许自动播放。我最初使用了autoplay muted 属性，但正如你所见，我在我的 cl-video 中没有这样做（只是自动播放）。 所以我把我的 cl-video 改成了这样：

<cl-video public-id="Situ-Sizzler-Web-Clip-v05-01_auvu5o" fetch-format="auto" autoplay="true" muted="muted"
    id="video" #video>

</cl-video>

它有效。