时间戳

首页 > 解决方案 > Angular cloudinary 自动播放具有响应宽度/高度的视频

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

问题描述

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

<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-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>

现在它工作得更频繁了，但有时它仍然不能自动播放......

标签： angularcloudinary

解决方案

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

用 Javascript 判断视频是否已加载

然后导致我这样做：

检查 html5 视频是否准备就绪

但最后我发现除非静音，否则视频将不允许自动播放。我最初使用了这些属性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>

它有效。

推荐阅读