Why .mkv, .flv, .ogv video file is not playing in safari?

Question

I am using cloudinary for uploading the videos.

While trying to play the video, I am using HTML video tag

<video controls playsInline>
    <source src={videoLink} />
</video>

Its working fine in google chrome and other browsers. But its not playing .mkv, .flv, .ogv video files in safari(15.4)

Answer 1

Safari doesn't support MKV's natively so you'd have to convert your video before playback by using a transformation.

Doing that with the video you've provided results in an error In general, to help debug Cloudinary URLs, the response includes an x-cld-error header, and looking at the URL you've shared, I see the header comes back with:

Video is too large to process synchronously, please use an eager transformation with eager_async=true to resolve

There is an online (synchronous) video transformation limit(40MB for free plans and 100 MB for paid ones), which means that for videos larger than the limit you'll need to perform the video transformations eagerly.

Eager transformations can be set upon upload or by updating your current resources using the explicit API.

Please take a look and see if that resolves the issue for you, and if you have any additional questions or need any guidance, just let me know.

Here is a sample code that I used,

 const upload = v2.uploader.explicit(
            public_id,
            {
                type: 'upload',
                resource_type: 'video',
                eager_async: true,
                eager: [
                    {
                        fetch_format: 'mp4',
                    },
                ],
                eager_notification_url: your_notification_url,
            },
            (error, result) => {
                if (error) return reject(error);
                resolve(result);                 
            },
        );