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

Posted 2023-03-25

【中文标题】Angular cloudinary 自动播放具有响应宽度/高度的视频

【英文标题】：Angular cloudinary autoplay a video with responsive width/height

【发布时间】：2021-02-15 09:52:23

【问题描述】：

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

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

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

【问题讨论】：

您能分享一下只返回图片的请求的详细信息吗？我知道有时f_auto 会在未启用该功能的情况下返回视频图片，但您提到它有时会播放（所以可能不是这种情况）。另外，您是否尝试过删除 flags 参数？在这种情况下，我认为它不会按照您的意愿行事，因为它会导致下载发生。

你想要什么细节？不带flag我试试，我还以为是一边下载一边蒸视频播放

这是创建的网址：res.cloudinary.com/situ-live/video/upload/e_volume:mute,f_auto/… 如果您打开它，它实际上会立即播放。但由于某种原因它在 cl-video 中不起作用.....

【参考方案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>

它有效。

【讨论】：

你知道这是否只发生在 Chrome 上，我知道 Chrome 有这种限制。但是很好，你把它提出来让别人找到。