Multi-State Web Object is Playing All Video States at Once

[Lee Millard]

The Setup

I'm using Adobe Captivate 2017. I have a video being loaded via a URL through a Web Object on a page. I have multiple states of this video, all pointing to different URLs (which are different language versions). Based on the user's language selection, it will load the proper state of the video.

The Problem

When I have Auto Load un-checked, everything works fine as it should. When I have Auto Load checked (preferred), ALL states are playing (selected state visible, but all the others playing audio in the background).

Help?

Has anyone experienced the same? I'm trying to figure out if it's a Captivate glitch or if it's based on the URL I'm pulling the video from. Second, if anyone has experienced this, how can I get this to work as expected (only playing video/audio of selected web object state).

Thank you!

[Jeremy_Shimmerman]

I think if you use different object states with a web object, things might get a bit buggy.  Instead I suggest using javascript to change the source of the loaded web object. 

Attach this to one of your language buttons - (obviously putting in the new url) 

document.getElementsByTagName("iframe")[0].src="www.anotherWebsite.com"

[Lee Millard]

Thanks for the quick response @JeremyS_77 ! I'm fairly new to Captivate (coming over from years of Articulate experience). So, we have our language selection screen on the first slide and the multi-state video/web object on slide 5. Would I put this JS code in on slide 5 on the slide enter action as a conditional statement (plays x based on X language selected)? Or would I add this to the actions in the language button like you said, somehow loading it on slide 5?

Appreciate your help and bearing with any newb questions.

[Jeremy_Shimmerman]

If the language selection buttons are on another slide this is one way you could handle this.

Create a variable called 'lang'.  Its under Project -> Variables. 

Then, for each language button execute javascript.

lang=www.languageselectedURL.com

Then, on slide 5 - the one with your web object - execute java script on slide enter. Put in the following script:

document.getElementsByTagName("iframe")[0].src=lang

This will load the url that you selected from your language buttons into your web object.  Let me know if this works for you. I can take a look tomorrow if you have any questions.

[floriank38625530]

Hey Jeremy,

thank you for this one.

"iframe" is the name of the name of the web object, isnt it?

so for example:

document.getElementsByTagName("Web_Object_01")[0].src=lang

Is that right? For me that didn't work in a similar project. I execute an action to put an url to the variable "lang". After that I put the code in a javaScript at the beginning of the next slide where the web object is located. But the web object didn't load.

Any idea?

Thank you very much

Flo

[Jeremy_Shimmerman]

Hi Flo,

You're identifying with the TagName not the Id, so it should be 'iframe'.

I did some checking and I'm getting a cannot display "set 'X-Frame-Options' to 'SAMEORIGIN' error.  This is basically a security issue - you are not allowed to display part of website from another site.

If you are only trying to show a video, you would need to enter in the embed code rather then the web address.  If you are hosting on Vimeo or Youtube, you should be able to pull the embed code and paste it into the embed box (not web address).

For example, here is an embed code from Vimeo. I would paste this into the embed box

<iframe src="https://player.vimeo.com/video/241744521" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

To change the video with a Captivate button, I would execute this code:

lang = https://player.vimeo.com/video/241744520

document.getElementsByTagName("iframe")[0].src=lang

[Lee Millard]

Sorry, I thought I followed up, but didn't. I tried your method Jeremy and it didn't work for me either. Because of time constraints I abandoned trying to make it work and just made 11 slides with 11 different URL's auto-loading in them through Web Objects. Then, based on a language selection variable I made, depending on what language was selected, it would skip to that particular video slide. Not as slick as I would like but it worked. Because I added 10 slides on to my total slide count too, I had to rework my progress meter as well.

If anyone has any more ideas I would love to try them out! Thanks!