Generate AI based video previews and play it on hover

Cloudinary offers an intelligent automatic generation of video previews to give viewers a preliminary look at the most interesting content. Combining this with being able to play the video on a user hovering over the content can reduce the overall bandwidth, improve page load times, and attract more views and clickthroughs.

Requirements:

• Cloudinary - To generate the video preview
• HTML 
• JavaScript - To add events that trigger mouseover and mouseout events.  

Example

Note: As this CodeSandbox embed is within an iframe and the example sandbox app is within an iframe itself, to see the preview on hover, please click anywhere in the sandbox (white padding around the video) and then hover.

How to generate an AI-based video preview?

All you need to do is add the parameter effect with preview (e_preview in URLs):

https://res.cloudinary.com/demo/video/upload/e_preview/baking_pastries

Additional References

Documentation: Generate AI-based video previews

Blog: Auto-generate video previews with great results every time