I'm developing a video streaming platform and want to use HLS for adaptive bitrate streaming, but I'm facing playback issues on Safari and older browsers. What's the best way to ensure cross-browser compatibility?

I'm building a web application for streaming educational videos and have implemented HLS using hls.js for Chrome and Firefox. However, Safari doesn't handle hls.js well, causing errors like "MediaSource is not supported" or buffering problems. I've tried using the native HTML5 video element with .m3u8 files directly, but it only works inconsistently across different versions. My goal is to support all major browsers, including mobile devices, without sacrificing performance.