How to fix NotAllowedError error when I try to play video in Safari browser?

Question

I have created an application that uses Azure Media Player and Angular framework. I have a problem with playing the video in the Safari browser (OSX). If I try to play a video that is NOT muted, I got the following error in the Safari console:

Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

I assumed that this error occurs when the app is trying to access the user's microphone, so I tried to prompt for microphone permission using the following code:

navigator.mediaDevices.getUserMedia({ audio: true })

But it doesn't work, I am getting the same error. Please, do you what could be a potential solution for this problem?

Thank you.