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添加到视频元素中，并注意到它也有类似的问题。玩了一会儿之后，我发现了这个：

判断是否在Javascript 中加载视频

这就引出了这个问题：

检查html5视频是否已准备好

但最终我发现，除非静音，否则视频将不允许自动播放。我最初使用了属性autoplay muted，但正如您所看到的，我在cl视频中没有这样做(只是自动播放(。所以我把我的cl视频改成了这个：

<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添加到视频元素中，并注意到它也有类似的问题。玩了一会儿之后，我发现了这个：

判断是否在Javascript 中加载视频

这就引出了这个问题：

检查html5视频是否已准备好

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

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

它是有效的。