I'm managing a website that hosts a lot of videos, and I want to ensure that all users can view these videos seamlessly, regardless of their Internet speed. If someone has a slow connection, I want them to automatically play the low-quality version of the video, while those with faster connections get the high-quality version. I've heard about services like Bunny for this purpose, but I'm also curious if it's possible to implement mouse enter/leave effects on the videos using these services. I'm particularly interested in how to add JavaScript hover effects, like starting playback when the user hovers over a video, considering that Bunny uses iFrames. Any advice would be greatly appreciated!
3 Answers
You can use hls.js to dynamically adjust video quality based on the user's connection speed. This works well with Bunny or other video services, like Cloudflare's video options. If you're trying to implement hover effects to manage bandwidth for mobile users, that might not work as expected. Instead, consider using the Intersection Observer API to load the video stream only when it's visible on the screen.
Thanks for the info! I'm more focused on how to create mouse enter/leave events for visual effects. Can I do that with Bunny?
Just so you know, mouse enter/leave events don’t work on mobile. Try to maintain standard user experience. Bunny provides direct video URLs, but you'll need to specify the resolution in the URL. You can find more details in their support documentation.
Got it! But I'm still hoping to integrate those mouse effects for desktop users—any tips?
You can consider using a tap event to manage that on mobile. Sounds odd, but it could work!
Be careful with this approach; connection speeds can vary quite a bit and start slow before speeding up. While there are tools to help manage this, it’s best to let the browser handle it if possible, as that's what they are designed to do.
+1 to adaptive streaming for sure!