Angular cloudinary 自动播放具有响应能力的视频 width/height

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>

而且有效。

Angular cloudinary 自动播放具有响应能力的视频 width/height

Angular cloudinary autoplay a video with responsive width/height

angular

cloudinary