Search code examples
safarivideo-streaminghtml5-videocloudinary

Cloudinary .mkv format video link is not playing in safari


Hi I am trying to stream the following video on my website from cloudinary, it is playing in all browsers except safari I have attempted f_auto, q_50, and many other combinations I have even tried to convert it to mp4 I also noticed that most files above 50MB are doing the same thing

Please help !!!

It is to mention that I am in cloudinary free version.

video link: https://res.cloudinary.com/impromek-com/video/upload/v1652337443/ucfj0kmirnsmgffrhzyd.mkv


Solution

  • 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);                 
                },
            );