Forum Discussion
Embed code using javascript
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.
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).