Forum Discussion

SamanthaKerr-87's avatar
SamanthaKerr-87
Community Member
25 days ago

Embed code using javascript

Hello,

Has anyone created an embed code using javascript before?  I think it's using the method described in the article link below.  Unfortunately I cannot use the usual iframe embed code because when the published Storyline file is uploaded to our SAP based LMS it creates special characters. Those characters mean SAP will not upload the finished course package. I am publishing a scormed package to SAP LMS and js code created by Viostream video is:

<script src="//play.viostream.com/embed/nixx79jdue59er"></script>

Seeking help with js code to create a separate .js file as described below.

https://access.articulate.com/support/article/Articulate-Storyline-360-JavaScript-Best-Practices-and-Examples

Don't include <script type="text/javascript"> in your triggers.

If you'd like to include all your JavaScript functions in a separate JavaScript (.js) file, place your custom JavaScript file in the story_content folder of your published output, then add the following line of code to the story.html file before the closing </head> tag.

<script LANGUAGE="JavaScript1.2" SRC="/story_content/MyJavaScriptFunctions.js" TYPE="text/javascript"></script>

  • 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.

     

    • SamanthaKerr-87's avatar
      SamanthaKerr-87
      Community Member

      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.

      • Nathan_Hilliard's avatar
        Nathan_Hilliard
        Community Member

        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).