I have a website where I stream audio using VideoJS.
The website is quite simple as it is plain HTML + Javascript + CSS
When the page is loaded this function is executed (for simplicity I have inserted some pseudo code):
function SetTimeouts(){
fetch('https://storage.googleapis.com/storage/v1/b/path/to/file.csv?alt=media',
{
method: "GET",
}).then(response => response.text()).then(csvData => {
for each row {
//...
// parses CSV file and calculates milliseconds until the time written in the row
//...
setTimeout(SetSource, millsecondsToNext);
}
}
})
}
This is the SetSource function:
async function SetSource(fetchMetadata = true) {
player.src({ type: 'application/x-mpegURL', src: 'https://storage.googleapis.com/path/to/file.m3u8' });
player.play();
}
Where player is previously intialized as:
player = videojs('stream', {
controls: false, autoplay: true, preload: 'auto',
html5: {
vhs: {overrideNative: false},
nativeAudioTracks: true
}
});
The audio source is correctly updated and automatically reproduced in every platform except in iOS.
In iOS, at the time set in the setTimeout the streaming stops and the page must be manually reloaded.
It seems that Javascript on iOS browsers behaves differently.
Has someone experienced a similar issue? What could be causing this behaviour?
I use this approach because I would like to avoid reloading the entire page.
I specify that the streaming works fine on iOS, the problem occurs when the setTimeout is triggered.
Thanks
Aames is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.