How can I upload and play an animated WebP image file?

[henryVr7]

I have a WebP (a 5-second video) and can’t upload it because I get the error message “[Can't upload file 'test.WEBP', file format not supported!]”

[PetersOtto]

Add the .webp format to the system/extensions/yellow-system.ini:

EditUploadExtensions: .gif, .jpeg, .jpg, .mp3, .ogg, .pdf, .png, .svg, .zip, .webp

That should work.

[henryVr7]

Thanks very much for the message. I can upload the file now, but it still doesn’t play. Is there any way to enhance the Image extension? If I try this HTML code instead, only the alt text is displayed:

<img src="/media/images/clip.webp"
     alt="Caption"
     width="720"
     loading="lazy"
     decoding="async"
     style="max-width:100%;height:auto">

[PetersOtto]

I'm not familiar with the .webp format for videos. I always thought videos used the .webm format.
I think the problem is the img tag. Have you tried the video tag yet?
Maybe Giovanni's video extension would be something for you?

#851
https://github.com/GiovanniSalmeri/yellow-video

[ghost]

Hello HenryVr7 !

I was searching the web and maybe this link helps you:

https://css-tricks.com/using-webp-images

But, if you export your animated image to a video file, you can use this code:

<div align="center">

<video width="340" height="340" controls poster="http://www.youryellowcms.tld/media/videos/poster/bed.png">
  <source src="http://www.youryellowcms.tld/media/videos/bed.mp4" type="video/mp4">
  <source src="http://www.youryellowcms.tld/media/videos/bed.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

</div>

I also used Gemini (the Artificial Intelligence) to ask for an animated webp alternative, and here is what I got in return:

Alternatives to animated WebP include animated AVIF, which offers better compression, for universal compatibility and ease of use, and Lottie files, for complex and interactive animations based on JSON

[...]

Which to Choose?
For Performance and Quality: Use animated AVIF for modern web applications where file size and loading speed are critical

And finally, this user wrote this post about adding Animated AVIF:

https://newsgroup.xnview.com/viewtopic.php?t=48065

[henryVr7]

Hey yesilovebooks, thanks a lot for your input.
I’ve managed it by displaying the files uploaded through the importer with this code:

<img src="/media/downloads/feuerwerk.webp"
     alt="Feuerwerk"
     loading="lazy"
     decoding="async"
     style="max-width:100%;height:auto">

That works fine for me. It just took me a while to realize that the WEBPs don’t end up in the Media folder, but in the Downloads folder. ;)

[ghost]

🤝

[annaesvensson]

The image format WEBP is not supported at the moment, at least not to the same extent as other image formats. As far as I know there are no plans to change this. You can try converting a WEBP image into an MP4 video.