Change video within smart player from link outside iframe (javascript)

  • 2
  • Problem
  • Updated 6 months ago
I have a list of a few videos in a series, all created in Camtasia 2018 for Mac.  The videos use the Table of Contents feature, so I need to play them within the Smart Player, and I cannot have them loaded to Screencast.  The Smart Player is embedded in an iframe (see code below).  I would like to be able to click a link from a list on the page outside the iframe, which will change the video in the src within the iframe, but I can't use a jquery because of some page restrictions.  Do you have some simple code, possibly in Javascript, to help.  Here is the code I'm using to embed the video:

<link href="http://www.example.com/css/embed.css"; rel="stylesheet" type="text/css">

<iframe class="smart-player-embed-container-iframe" id="embeddedSmartPlayerInstance" src="http://www.example.com/videoname/media/index_player.html?embedIFrameId=embe...; scrolling="no"  frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>

<script src="http://www.example.com/videoname/media/scripts/embedded-smart-player.min.js...;
</script>

Any help you can provide is greatly appreciated.

Photo of Rob C.

Rob C.

  • 6 Posts
  • 5 Reply Likes

Posted 6 months ago

  • 2
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 390 Posts
  • 148 Reply Likes
Hi Rob,

I've created an example that shows how to switch iframe source without jQuery.
https://codepen.io/nocircleno/pen/yLyLmeX

Note that I did use screencast.com to host the videos, but that is not a requirement.  This should work fine for the videos you are self hosting.

Hope that helps,
Ben
Photo of Rob C.

Rob C.

  • 6 Posts
  • 5 Reply Likes
You're a wizard, Ben!  Thanks a lot.  It works well.  The only challenge is that I will have 239 buttons linking to 29 different videos, which makes the code cumbersomely long.  But it works!  And my students will love you for it.

Thank you so much,

Rob
Photo of Rick Stone

Rick Stone

  • 6586 Posts
  • 3158 Reply Likes
LOL, amused at the initial mention of  "I have a list of a few videos in a series" then hearing you will have 239 buttons and 29 different videos.

Curious though about the disparity. That seems like a lot of buttons. Are they HTML buttons on the page? Or hotspot buttons in one or more videos? Do you have several buttons linking to different parts of the same video?
Photo of Rob C.

Rob C.

  • 6 Posts
  • 5 Reply Likes
LOL - You're totally right, Rick.  I didn't want to complicate my original post.

They're actually simple links on the page, but Ben's solution used buttons, so I just adapted his solution and made the links into buttons.  They're not hotspots in the videos.

I have created a full series of software instructional videos (29), and I provide my students with an index page in Moodle with all of the software functions (239) taught in the videos.  They can sort the index table of functions by number, function, video, course, module; or they can do a simple Ctrl+F search when they want to find the video that explains the function they need.  Because the buttons are all uniquely named/numbered in Ben's solution, I am adapting them accordingly for my needs.  I'm sure this could be done much more efficiently, but I don't know how.

Ideally I would prefer them to be able to click on a link for a function, have it change the video in the iframe and automatically jump to the marker where that function is explained in the video, but I figured that would be too complex for my limited coding ability.  I'm an instructional designer, not a programmer.

R
Photo of Rick Stone

Rick Stone

  • 6586 Posts
  • 3158 Reply Likes
Hmmm, it's likely overkill for something like this. And I'm guessing you want to keep it all in Moodle anyway. Likely you are tracking things?

But I've used a product for more than 20 years that sounds perfect for something like this. The product name is RoboHelp and it's presently owned by Adobe. If you want to see one example of how it works, I've got a site at MOACR.com that serves as an example. 

Cheers... Rick :)
Photo of Rob C.

Rob C.

  • 6 Posts
  • 5 Reply Likes
Thanks for the recommendation, Rick.  It's been a very long time since I used RoboHelp, so I'll have another look at it.  I'm not sure how it'll integrate with my Moodle installation, but I'll do some experimentation.  I really appreciate your suggestion, thanks.

Cheers,

Rob


Photo of Rick Stone

Rick Stone

  • 6586 Posts
  • 3158 Reply Likes
I only mentioned it because it's a fabulous tool for organizing things and presenting them in a simple and easy to find manner for end users.
Photo of kayakman

kayakman, Champion

  • 7818 Posts
  • 2730 Reply Likes
curious ... is this anything like you're trying to accomplish?

CookBookPlus Menu

25 main chapters, about 225 buttons linking to 225 videos; 1 frame captions [not usually shown] enable key word searches

the menu is a Camtasia video, hotspot driven; no custom coding required
Photo of Rob C.

Rob C.

  • 6 Posts
  • 5 Reply Likes
Not quite, kayakman.  The links are not hotspots, and the videos are stand-alone.  The index of videos and links is below the video in a sortable table.  I like what you've done with the buttons, though.

Cheers, Rob

Photo of kayakman

kayakman, Champion

  • 7818 Posts
  • 2730 Reply Likes
thanks for the reply

could you perhaps at sometime post a screenshot showing the layout of your approach?
Photo of Rob C.

Rob C.

  • 6 Posts
  • 5 Reply Likes
Here is what the page looks like using Ben's code.  It added 1200 lines of code to the page, but it works like a charm.

Photo of kayakman

kayakman, Champion

  • 7818 Posts
  • 2730 Reply Likes
thanks; appreciate you sharing