CODEWITHSUNDEEP
react-nativescorm
hanae
hanae

Reputation: 101

how to play scorm file with react native?

I have a scorm content and I play it inside a webview in my react native application, but I want to change the style of the buttons which appear at bottom of the webview and which control stop/play/resume video ... So is there a way to do that ?

Upvotes: 0

Views: 1870

Answers (1)

Mapsy
Mapsy

Reputation: 4272

There are a couple of ways you could approach this.

  1. You can execute JavaScript directly on the WebView; so, you could use document.getElementById('...') to obtain a reference to the buttons you want to change, and then update the button styles, making sure to retain the onPress behaviour.

  2. Slightly nicer; you could hide the buttons on the page altogether, and instead define some <Button />s inside of your React layout. In the onPress of your React buttons, you could execute the JavaScript you'd normally expect the WebPage buttons to execute. This would require figuring out how to trigger those handlers.

Both of these require some inspection, understanding and experimentation with the source you're trying to manipulate. I'd recommend opening up the page in your browser and using:

javascript:console.log('your');console.log('js');console.log('here);

inside your URL bar to find the commands you want to run before trying to pass them into the WebView. Alternatively, you can also inject JavaScript directly into the page if you use the browser's Inspector pane.

See: Execute JavaScript inside WebView source

Upvotes: 0

Related Questions