SCORM Cloud courses with external media/video streaming
This tutorial focuses on how to have SCORM course media in external systems like cloud video streaming systems.
If you are looking for creation/uploading a course to SCORM Cloud then go through this post: Uploading/launching a course in SCORM Cloud using C# .NET
###Course media content on external cloud instead of SCORM cloud
When we are uploading a course to SCORM cloud, we normally upload the media files like Videos to ScormContent folder. If the media/video file size is huge, we might need more SCORM cloud space. Also it may require more time to download the video from SCORM Cloud when the course is being played.
To overcome this we can place the video files in an external cloud which supports media streaming. Here are the advantages of this practice.
- The media/video files are maintained separately and hence can be used by multiple systems not just the SCORM.
- If the media file size is huge, due to the video streaming service, the course can be played quickly without waiting for complete file download.
- Even if your SCORM account expires, your media files are still with you on the external cloud.
How to do?
I'l be concentrating only on the code changes required to trigger a media from external systems. If you want to see the complete course creation/Uploading/launching steps go through this post - Uploading/launching a course in SCORM Cloud using C# .NET
Here we still upload the course zip files to SCORM cloud, but the source of the media will be pointing to external cloud. Follow the below steps to do the same.
Usually when a SCORM Cloud uploaded course is launched, "/scormdriver/indexAPI.html" is the file which which gets triggered. If we open this file, we can find the below line.
strContentLocation = "../scormcontent/index.html"; //Put the link to the start of the content here.It says that load everything from index.html file. So do not update the "/scormdriver/indexAPI.html" file instead open the "scormcontent/index.html" and update it.
Open the file scormcontent/index.html. It will be a simple html file with sample text "Your content goes in the scormcontent folder.". Just below this add a iframe with some saple video and video player and save it as shown below.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><body> Your content goes in the scormcontent folder. <iframe src="//aka.ms/ampembed?url=%2F%2Famssamples.streaming.mediaservices.windows.net%2F91492735-c523-432b-ba01-faba6c2206a2%2FAzureMediaServicesPromo.ism%2Fmanifest" name="azuremediaplayer" scrolling="no" frameborder="no" align="center" height="280px" width="500px" allowfullscreen></iframe> </body></html>Note: The iframe and the video is a sample video using azure player here - http://ampdemo.azureedge.net/
Make all the necessary changes and upload the course (.zip file) to SCORM Cloud and then launch the course. You see the sample video playing as part of your course.
Note: Here we have used an iFrame. Instead we can use more complex logic to include a html5 video tag or a DASH player and stream the video from external streaming services to your SCORM course.
Hope it helps! Please comment your thoughts or suggestions
Pranay
A Software Engineer by profession, a part time blogger and an enthusiast programmer. You can find more about me here.
