I am working with an app that I have placed in cloud. The web version of the app works nicely with Windows Desktop and Android mobile and even Mac Desktop but fails to play both audio element and video (react-player) with iPhone mobile.
The audio element start button is displayed, but clicking the button does not start the audio. Nothing seems to happen on click.
const [audioPlayer, setAudioPlayer] = useState<HTMLAudioElement | undefined>(undefined)
const playRecordedNote = async () => {
const audio = new Audio(audioUrl)
audio.muted = false
audio.autoplay = true
await audio.play()
audio.addEventListener('ended', audioEndedActions)
setAudioPlayer(audio)
}
In place of the video there is just a black view with a white "play" icon with a strikethrough line. Nothing happens on click.
<ReactPlayer
url={videoUrl}
controls={true}
width='100%'
height='100%'
onEnded={() => console.log('ended')}
playsinline={true}
onError={(error) => console.log(error)}
/>
Is there a way to listen to audio elements and play videos in iPhone mobile web app?