I'm using a webView to access an online radio webpage. The radio has a button to start/pause the stream and its always paused on startup, so I have to click on the play button to have it start playing.
//my code for webView
<WebView source={{ uri: 'https://mmufmkenya.radio12345.com/' }}/>
//button that when pressed calls the play function from webView
<Button onPress={()=> playButton()}>
Can someone please help me out with a working snippet I can try study or anyone willing to explain to me like I'm 5
What I have tried:
I have read on injectedJavascript and passing javascript code to webView but keeps failing (primarily because I'm still in learning phase and I'm not sure if I'm doing it right)
From reading a few articles and docs I changed my code to:
//I don't know of the correct className but I think it's 'jp-play'
const jsCode = "setTimeout(function() { const playButton = document.getElementById('jp-play')}, 2000)";
return(
<>
<WebView source={{ uri: 'https://mmufmkenya.radio12345.com/' }}
javaScriptEnabled={true}
injectedJavaScript={jsCode}
javaScriptEnabledAndroid={true} />
<Button onPress={()=> playButton()}/>
</>
)
I just need a custom button that when pressed it calls the play function from the webpage
https://mmufmkenya.radio12345.com/
Have you tried to use useRef and see if there is any method you can call from there ?
From your code you try to get an id that doesn't exist. You need to add an id "jp-play" to your source. Here an example from one of my previous project:
source={{
html: `
<iframe id="player1" src="https://player.vimeo.com/video/${vimeoId}?api=1&player_id=player1#t=${lastTimecode}s" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
`,
}}