0

I had a video that was playing on my site which was just set as this:

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

The CSS made it a background video, like this:

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

I am using the Angular Cloudinary library and have been struggling to get this to work the same. My HTML looks like this:

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

Sometimes it does play, but most of the time it just loads the poster image and never plays the video. If I remove the CSS and change the html to this:

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

I can press the play button and it will play. Is there something I am doing wrong?

Also, I would love it if it would resize based on the resolution. Does anyone know how that can be done? With images, you can just add responsive but I can't find anything for video.

I thought I found a solution to this. I tried manually adding the generated URL to a video element and noticed that it had similar issues. After a bit of playing I found this:

Tell whether video is loaded or not in Javascript

which then lead me to this:

Checking if a html5 video is ready

But finally I found that a video will not allow autoplay unless it's muted. I had originally used the attributes autoplay muted but as you can see I haven't done that in my cl-video (just autoplay). So I changed my cl-video to this:

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

</cl-video>

Now it works more often, but still sometimes it doesn't autoplay.....

r3plica
  • 13,017
  • 23
  • 128
  • 290
  • Can you share details of the request that just returns a picture? I know that sometimes `f_auto` will return a picture for a video if that feature is not enabled, but you mention it plays sometimes (so that's probably not the case). Also, have you tried removing the flags parameter? I don't think it will do what you intend in this case since it will cause a download to happen. – Daniel Mendoza Nov 04 '20 at 00:38
  • what details would you like? I will try without the flags, I thought it was steaming the video and playing while downloading – r3plica Nov 04 '20 at 10:03
  • this is the url that is created: https://res.cloudinary.com/situ-live/video/upload/e_volume:mute,f_auto/Situ-Sizzler-Web-Clip-v05-01_auvu5o.webm if you open that, it actually plays straight away. but it doesn't work in the cl-video for some reason..... – r3plica Nov 04 '20 at 11:48

1 Answers1

0

I appear to have fixed this. I tried manually adding the generated URL to a video element and noticed that it had similar issues. After a bit of playing I found this:

Tell whether video is loaded or not in Javascript

which then lead me to this:

Checking if a html5 video is ready

But finally I found that a video will not allow autoplay unless it's muted. I had originally used the attributes autoplay muted but as you can see I haven't done that in my cl-video (just autoplay). So I changed my cl-video to this:

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

</cl-video>

and it works.

r3plica
  • 13,017
  • 23
  • 128
  • 290
  • Do you know if this only happens on Chrome, I know that Chrome has this sort of restriction in place. But good you brought it up for others to find. – Daniel Mendoza Nov 05 '20 at 23:30