Solved

Embedding a video

  • 26 October 2020
  • 2 replies
  • 58 views

Userlevel 1
Badge

Has anyone found a way to embed a Showme video in a web page?

Playing with video.js, but it can’t seem to read the clicklearn output. 

I am currently linking to the showme directly using a Community tip (thanks Michael), but it returns to the clicklearn portal rather than my page.

And it is a link…  I’d rather embed so the user can watch the video on the same page if they so choose.

 

I should note that my site does not support embedding the windows movie player. 

icon

Best answer by tbay-stranger 2 November 2020, 18:25

Yeah that’s a tricky one @amygracer.  I can’t say I’ve dug deep to help with what you are looking for either but I can share my findings.

It’s important to understand some context first.  ClickLearn “videos” aren’t really videos.   This will hinder your ability to piggy back and play it in your own player.  ClickLearn appears to build the video on the fly - from a collection of PNG and MP3 files (one for each step) found in the output material after publishing.  Example you’ll see items like cl1.mp3 which corresponds to cl1.png (1st step audio and image).

When you click on the ShowMe video; it executes a javascript function called “clcontentview2”, and sends a variety of parameters, and opens their video modal.  This video modal ties to the associated .jsv.htm file for your published recording.   There’s a ton of script content in here so the approach of “rebuilding the video” seems like it would be way too involved so I would not venture to this approach at all.

Personally, what I have done; is create a custom JavaScript function that will allows me to append parameters when linking to my ClickLearn material.  For example;  a ClickLearn link might appear like: https://your.site/ClickLearn/TestShelf/TestShelf.aspx?b=TestBook&r=MyTest (This would be a link to your recording MyTest, from your TestBook and the TestShelf.)  The portion after the ? mark in the link are referred to as parameters within the URL.

I’ve created a parameter called “VideoMode” to that link:
https://your.site/ClickLearn/TestShelf/TestShelf.aspx?b=TestBook&r=MyTest&VideoMode=XXXX

XXXX can equal “ShowMe” “TryMe” or “TestMe”.

You can add a million parameters to any link, and it shouldn’t affect the page loading whatsoever.  Not until you create a script to read those parameters and create an action based on it.  So what I’ve done, is create a custom JavaScript function, to grab my new parameter (VideoMode) and then execute jQuery to “click” on the ShowMe link from the page.   This essentially will allow me to directly link to a Video mode (e.g. from a company wiki page, or training module).  I then modified the ClickLearn template to load the jQuery libraries, and my custom Javascript file with my function in it, and executed the function upon page load.

This might be relevant, because if you did the same, you might be able to use an <iframe> to then “embed” the video into an existing page on your site.

The hack and slash method would be to play the ClickLearn ShowMe video, and record it using a screen recorder (like SnagIt or whatever).   You could then have a video file that can be embedded into your site - but this is also not a good approach as you would have to re-record each time you made an update to the source.  Also, MP4 will want to use Windows Media Player, so your best best if you went with the hack&slash method would be upload that recording to a host site and embed that (if it allows it).  Like youtube or vimeo.  

Hope this helps;  I could be completely wrong and missing something but figured I would share my findings.  I’m not sure if videos are handled differently in Attain either; so that could be something to look into.  Are they true videos or use the same technology?

-Kevan

 

 

 

 

 

 

View original

2 replies

Userlevel 5
Badge

Hi! Great question. We don't know of any customers who have done this, as it would also mean a lot of manual work, and issues around change management. I am not but a hunch tells me perhaps @tbay-stranger or @Michael Foster  would have some experience in this and could help you in the right direction?"

Userlevel 1
Badge +1

Yeah that’s a tricky one @amygracer.  I can’t say I’ve dug deep to help with what you are looking for either but I can share my findings.

It’s important to understand some context first.  ClickLearn “videos” aren’t really videos.   This will hinder your ability to piggy back and play it in your own player.  ClickLearn appears to build the video on the fly - from a collection of PNG and MP3 files (one for each step) found in the output material after publishing.  Example you’ll see items like cl1.mp3 which corresponds to cl1.png (1st step audio and image).

When you click on the ShowMe video; it executes a javascript function called “clcontentview2”, and sends a variety of parameters, and opens their video modal.  This video modal ties to the associated .jsv.htm file for your published recording.   There’s a ton of script content in here so the approach of “rebuilding the video” seems like it would be way too involved so I would not venture to this approach at all.

Personally, what I have done; is create a custom JavaScript function that will allows me to append parameters when linking to my ClickLearn material.  For example;  a ClickLearn link might appear like: https://your.site/ClickLearn/TestShelf/TestShelf.aspx?b=TestBook&r=MyTest (This would be a link to your recording MyTest, from your TestBook and the TestShelf.)  The portion after the ? mark in the link are referred to as parameters within the URL.

I’ve created a parameter called “VideoMode” to that link:
https://your.site/ClickLearn/TestShelf/TestShelf.aspx?b=TestBook&r=MyTest&VideoMode=XXXX

XXXX can equal “ShowMe” “TryMe” or “TestMe”.

You can add a million parameters to any link, and it shouldn’t affect the page loading whatsoever.  Not until you create a script to read those parameters and create an action based on it.  So what I’ve done, is create a custom JavaScript function, to grab my new parameter (VideoMode) and then execute jQuery to “click” on the ShowMe link from the page.   This essentially will allow me to directly link to a Video mode (e.g. from a company wiki page, or training module).  I then modified the ClickLearn template to load the jQuery libraries, and my custom Javascript file with my function in it, and executed the function upon page load.

This might be relevant, because if you did the same, you might be able to use an <iframe> to then “embed” the video into an existing page on your site.

The hack and slash method would be to play the ClickLearn ShowMe video, and record it using a screen recorder (like SnagIt or whatever).   You could then have a video file that can be embedded into your site - but this is also not a good approach as you would have to re-record each time you made an update to the source.  Also, MP4 will want to use Windows Media Player, so your best best if you went with the hack&slash method would be upload that recording to a host site and embed that (if it allows it).  Like youtube or vimeo.  

Hope this helps;  I could be completely wrong and missing something but figured I would share my findings.  I’m not sure if videos are handled differently in Attain either; so that could be something to look into.  Are they true videos or use the same technology?

-Kevan

 

 

 

 

 

 

Reply