Forum Discussion
Embed code using javascript
So, were you trying to find a way to load a JS library through a JS trigger inside of SL, instead of hardcoding it into the project files? I wasn't quite sure of your goal.
If so, look at the trigger in the attached file. It loads your viostream library on slide timeline start. The library adds the following functions to the window object (e.g., window.videojs()).
You could add the script to the master slide and set a variable to make sure the trigger runs only once to load it once for your entire project, making it available on any slide.
Hello Nathan,
Thanks for responding to me. My preference was to use the usual video embed code (an iframe) but when I scorm and export the project to upload to our SAP based LMS the published output contains a bunch of special characters from the embed code that the LMS can't cope with. I would love to upgrade our LMS, but that is not an option. I did note that our video host provides both iframe codes and references to java script. <script src="//play.viostream.com/embed/nixx79jdue59er"></script>
I tried putting this into the embed code editor, but it does not work either.
So my question was how else can I use that code in the project? I was thinking perhaps I could create a .js video script, add it to the story-content folder and update the story.html file as they suggest in the help documentation.
The script you mention appears to be the actual player rather than the video.
Do you normally just do an insert video in SL with your embed code? Are you able to share the the embed code for the video? When you say there are special characters in the published scorm output, how do you know, and can you share the modified embed?
Possibly you could insert a web object into SL instead of a video, and craft your own mini page inside the index.html that would load the player script and the video embed? It's difficult to speculate without something to test.
Edit: For any future readers: While this works to load videos via the API from VioStream, my account is only a trial. If you find the video link broken, replace the account and video details with your own VioStream information.
OK, I looked into this further. I don't have an SAP LMS, but see below for two options for embedding your video clips from VioStream. I have attached a sample project with both.
1) JavaScript
To load the stream player and add your video to a slide, use the script below. It finds a rectangle on your slide and inserts the video into it (see the demo and the script comments for details).
//load the Vio player script and set the target container for the video //See also: https://help.viostream.com/media-players/using-the-player-api/ script = document.createElement('script'); //Requires the key from the Remote Path, under the Developer Tools Tab in Settings script.src = "https://play.viostream.com/api/VC-4778032502"; script.onload = function() { console.log("Vio Player is loaded."); //Get the identifying tag for the rectangle in which you want to place the video //Right click Shape on timeline, select Accessibility to set the alternate Text //Assign value to tag variable in SL let tag = GetPlayer().GetVar("tag");//"Rectangle"; //this will hold the video clip let el = document.querySelector("[data-acc-text^='" + tag + "'] div"); el.id = "vioVidContainer"; //allow click through to the player controls el.style.pointerEvents = "auto"; $viostream.embed(GetPlayer().GetVar("vioVideoKey"), el.id); //console.log("el:", el); } //add the script to the DOM document.head.appendChild(script);2) Web Object
Since you said the regular video embed would not work for you purposes, you can try just using a web object into which you place the following index.html file. It adds the video clip inside the web object. Maybe this will load properly into your LMS.
<html> <head> <title></title> <style> body { margin: 0 0 0 0; overflow:hidden; } </style> </head> <body> <iframe width="100%" height="100%" src="//play.viostream.com/iframe/rqci9msrqcsn9a" referrerpolicy="strict-origin-when-cross-origin" allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen="" frameborder="0" style="position:absolute; top:0; left: 0"></iframe> </body> </html>Note, in both examples you need to update the video key in the links. I set a variable in SL to hold the video key. In the script example, you also need to update your vio account key (see the comments inside the script).