Recorded Video doesn't play in Safari on macOS and iOS

[prologictechnologies-zz]

Hi Muaz, How are you?

The video recording works on Mac and windows but when the recorded video is played back in HTML5 video player, it doesn't play is some cases. Here is the status chart of the recorded video when played back in HTML5 video player on following browsers and OS.

Browser Windows iOS macOS

Chrome Working Not Working Working

Firefox Working Not Working Working

Safari 11 Not Working Not Working Not Working

Please help.

regards, Rajiv.

[derek-adair]

In the future you will need to provide the exact user agent strings for this to be of any meaning.

http://www.useragentstring.com/

[kriefsacha]

@prologictechnologies found solution ?

[samuelweckstrom]

Had the same problem and solved with setting mimeType: "video/mp4" in recorder options.

[mreall]

When I record with mimeType: "video/webm;codec=vp8" (which is the only format the instructions show as compatible with Chrome, FF, and Safari, I can view the video fine on Windows and Android, but not iOS. The file is saved as a .webm file, which Safari says it can't read (Safari version 12.1.2 on iOS 12.4.6). If I set the mimeType to "video/mp4" it doesn't record on Win10/Chrome.

Is there a setting that will record in a format viewable by Chrome, FF, and Safari on Win, Mac, Android, and iOS?

[reynoldspaul]

How do I ensure webm playback on Safari?

I'm recording screen + Audio in chrome with mime_type: video/webm, and saving on PHP server to webm. These files playback in chrome and FF, but are not playing in Mac OS Safari 12.1.12

Do I need to record the screen + audio in mp4? Or do i need to convert the webm to mp4 on the server?

[codehunter1992]

Playback on safari is working (on Chrome no). Video mimeType is "video/mp4" in my case. After uploading video to server, it is not being played on html5 video element. Any same issue or solution?

[Chingachcook]

Same issue as @babytiger0929. Is there any solution to a problem with IOS and Mac OS?

[farazshuja]

Here is how I solved the issue 1-- create the video using mimeType: 'video/mp4' This generates the mkv container.

2-- Convert the video container to mp4 using ffpmeg on server or ffmpeg.wasm in browser. In my case I was uploading to firebase storage so used cloud function to auto convert it.

import ffmpegPath = require('@ffmpeg-installer/ffmpeg');
import ffmpeg = require('fluent-ffmpeg');

ffmpeg.setFfmpegPath(ffmpegPath.path);
ffmpeg(tempFilePath)
        .outputOptions(['-c', 'copy'])
        .output(outputFilePath)
        .on('end', resolve)
        .on('error', reject)
        .run();

3-- Now its playable in safari

<video controls muted>
  <source :src="videoSrc" type="video/mp4" />
</video>        

[nadjibwebdev]

Here is how I solved the issue 1-- create the video using mimeType: 'video/mp4' This generates the mkv container.

2-- Convert the video container to mp4 using ffpmeg on server or ffmpeg.wasm in browser. In my case I was uploading to firebase storage so used cloud function to auto convert it.

import ffmpegPath = require('@ffmpeg-installer/ffmpeg');
import ffmpeg = require('fluent-ffmpeg');

ffmpeg.setFfmpegPath(ffmpegPath.path);
ffmpeg(tempFilePath)
        .outputOptions(['-c', 'copy'])
        .output(outputFilePath)
        .on('end', resolve)
        .on('error', reject)
        .run();

3-- Now its playable in safari

<video controls muted>
  <source :src="videoSrc" type="video/mp4" />
</video>      

Hi, can you show in details the source code in Javascript and HTML please? I have the same issue: https://github.com/muaz-khan/RecordRTC/issues/840#issue-1748782269

[cloudapper-ai]

Does anyone else have a solution that works for all platforms? I am looking for a solution that does not require using the backend to transcode.

In my Mac Chrome browser, it's producing "video/x-matroska", even if I set mime-type as "video/webm" or "video/mp4". In the Safari browser, recorded video plays as expected, but in the Chrome browser, it does not.