CODEWITHSUNDEEP
react-nativewebviewyoutubevimeoscorm
CHARITH BUDDHIKA
CHARITH BUDDHIKA

Reputation: 1

How to Display and Play SCORM, YouTube, and Vimeo Content in a React Native App?

I am developing a React Native app where users can view a list of courses from the Learning Planet catalog. The courses include SCORM packages, and videos hosted on YouTube and Vimeo. I need to implement functionality to play SCORM content as embedded media within the app using a WebView and to play YouTube and Vimeo videos. I'm looking for guidance on how to integrate these into my app's video screen. Specifically, I need help with:

Embedding and playing SCORM content using react-native-webview. Embedding and playing YouTube videos using react-native-youtube-iframe. Embedding and playing Vimeo videos using react-native-webview or another suitable library. Any advice on best practices, or potential issues I should be aware of, would be greatly appreciated.

I have successfully set up a list of courses using a FlatList in React Native. For SCORM content, I tried using react-native-webview to load the SCORM package URL, expecting the content to display and function within the app. For YouTube videos, I used react-native-youtube-iframe, and for Vimeo videos, I tried using react-native-webview to embed the video URLs.

I expected the SCORM content to display interactively within the WebView and for the YouTube and Vimeo videos to play seamlessly. However, the SCORM content is not loading as expected, and there are issues with some videos not playing correctly. I'm not sure if I'm missing any configuration steps or if there's a better approach to handling this type of content in React Native.

Upvotes: 0

Views: 148

Answers (1)

Brian J. Miller
Brian J. Miller

Reputation: 2274

At least for the SCORM content it is not enough to just load the provided page into a web view, it requires a SCORM runtime environment API to be provided. For more information about the SCORM RTE see https://scorm.com/scorm-explained/technical-scorm/run-time/

One way to consider implementing this is to use SCORM Cloud to handle the SCORM content that you are loading in the webview. SCORM Cloud via its API can also handle treating YouTube/Vimeo hosted videos like elearning courses where data will be captured about what the users do with the video.

Upvotes: 0

Related Questions