In this article, we will explore how to make the most of e_loop to enhance your videos and make them stand out.
Cloudinary's e_loop parameter is a valuable tool for creating seamless video loops. It allows you to specify the number of times a video will play before it loops back to the beginning. By controlling the looping behavior, you can create mesmerizing visual effects, seamless transitions, and engaging content that keeps viewers hooked.
Best Practices for e_loop Implementation:
Fine-Tune the Looping Duration: Experiment with different e_loop values to achieve the desired looping effect. Depending on the content, a shorter loop duration might be more effective for quick attention-grabbing content, while longer loops could work better for immersive or atmospheric videos.
- For GIFs, the number is optional; leaving the number value empty, will result in an infinite loop of joy. Looping animations (like GIF) is done on the backend since it's embedded metadata within the actual file.
https://res.cloudinary.com/demo/video/upload/e_loop/happy_dog.gif - For videos, there is a limit of up to 6 loops, you must specify the number of loops (between 1-6), and there is no support for endlessly loop videos at the moment. Looping videos on the backend is not recommended, as it actually concats the video again and again into an unneeded, wasteful big video file. If the video needs to be looped, then you can use the loop attribute of a <video loop> tag in your HTML and you can add the loop attribute to your video tag in the HTML.
https://res.cloudinary.com/demo/video/upload/e_loop:6/happy_dog.mp4
Optimize File Size and Loading Speed: To ensure optimal performance and fast loading times, consider compressing your video files while delivering them. Balancing the file dimensions w_<width> with the desired video quality and format is crucial to deliver a smooth user experience across various devices and connection speeds.
I would recommend to deliver in either animated webp or gif formats along with automatic quality transformations.
With these, we will automatically choose the quality level based on the user's browser and analysis of each image's details to provide a large bandwidth saving with minimal effect on the visual properties of the image. For example:
Original - GIF 28.47 MB:
https://res.cloudinary.com/demo/video/upload/e_loop/happy_dog.gif
Optimized - GIF 2.48 MB:
https://res.cloudinary.com/demo/video/upload/q_auto/w_400/e_loop/happy_dog.gif
Optimized - Animated WebP 2.48 MB:
https://res.cloudinary.com/demo/video/upload/fl_animated,fl_awebp,q_auto/w_400/e_loop/happy_dog.webp
You can find more information here in our official docs: https://cloudinary.com/documentation/video_effects_and_enhancements#loop
Comments
0 comments
Please sign in to leave a comment.