Trigger on Vimeo/online video completion.
Jul 18, 2022
By
Rahul M
Hi,
I am facing an issue on triggers while i am trying have a next button hidden of player and the custom button should appear/change its state post online video completion. But i think i may be making a mistake somewhere please let me know if there is a solution for this.
I am looking forward for the learners to complete the video hosted on vimeo and i am placing it as an embedded video applying below triggers :-
1. Hide Next button when timeline starts.(Works)
2. Hide Prev Button when timeline starts.(Works)
3. Change the state of Next Icon to normal when online video completes.(Not Working)
Please help!
Thanks :)
24 Replies
Hi Rahul,
Sorry to hear that you ran into this issue. We are currently tracking a known bug which prevents the 'when online video completes' condition to not work properly in triggers. I've added this forum post to the bug report so we can notify you as soon as a fix is released.
Thanks Joe! Wish the team very best to find the fix soon.
Hi Joe, Any luck on this fix?
Hi Rahul,
Thanks for checking in on this!
The issue described in your post is the expected behavior regarding videos on websites. Here is an article about this. This has been submitted as a feature request though. If there's any news to report on this, this conversation will be updated.
Thanks John
This issue is killing me today. I simply cannot get the trigger "Set state of __X___ to Normal when Online Video 1 completes" to work, at all. How else can I do this? (Videos are hosted in Vimeo, could that be the problem?) I need to ensure users cannot see/use the custom Next button until the video is done.
Hello Fred,
Vimeo has a javascript api.
Using this api, code can be written that can update storyline variables. When the storyline variable is updated to 'Ended', you can have a trigger change your custom next button from hidden to normal.
Here is a link to a published storyline project:
http://www.knowledgeconstruction.com/vimeo/story.html
I have also attached the storyline project and a webobject.
The webobject has an index.html within it. It has the code to show a vimeo video and the code that updates the storyline variables. You can easily edit this code by opening the file in notepad.
Hey Russell,
You have saved me and many others like me.
Thank You.
I will update you once I am getting success which I am sure i will.
Russell, this looks amazing! I understand about 80% of it... So, I can edit the html file, no problem, I see where the embed code goes in there, but where does the web object live? When I publish, does it get "packaged" with my course even though I linked to it on a local drive? I'm just not clear on how the code is linked to in the published course file.... I feel as though I'm almost there! :D
Hi Fred,
When you edit the html file, you will need to reinsert the webobject on your storyline slide.
Thank You!! I got it to work. I didn't really understand how Web Objects work until now. Cool! I'm just learning javascript, so this will be a good example for me to deconstruct and learn from. THANK YOU SO MUCH!
Hi All. I dont suppose you would have a way to do the same with Wistia videos would you Russell?
Many thanks
Hi Craig!
I just wanted to pop in and share that since this discussion is a bit older, Russell may no longer be subscribed. If you want to reach out to him directly with questions, you can do so by clicking on his name and selecting 'Contact Me.'
Sorry, I don't have any videos hosted on Wistia. So I haven't looked at their API.
Hello Craig,
I decided to take a look at their API.
Here's a link to the published storyline project:
http://www.knowledgeconstruction.com/wistia/story.html
And attached is the webobject and storyline file.
Amazing Russell!
Apologies for the late reply but this is much appreciated
Russell,
When I run your SL file neither the video status or the video time fields update. They remain blank. I have made sure that the web object is pointed to the folder with the index.html file and I am publishing to the web. The video will load and I can play it, just nothing populates either of the two fields.
Any thoughts on this?
Hi Joe,
I don't know why it's not working for you.
I just published it to Review 360 and its working there.
https://360.articulate.com/review/content/83654b05-8016-4164-8b5e-af351cbec01c/review
Make sure that you are viewing it from an online source.
Ah, the missing piece of the puzzle. Thanks for the reply.
I'm attempting, in my old age, to learn some relevant JavaScript that can be used in SL, so please excuse me for asking something that is probably very basic. I have figured out how to get the "Videotime2" variable to populate as a percentage ( SLplayer.SetVar("Videotime2", data.percent); ) but I have been unable to figure out how to multiply that output by 100 so that it reads 0 - 100 and not .0 - 1.
We don't want the person taking the course to be able to scrub through the video until it has played once. I was thinking that I would have to create a 2nd slide with a web object pointing to a second version of the video where the scrub bar is available and having the course move to that second slide after the first plays through. I did not see any indication, in the Vimeo SDK documentation, that you could turn the scrub bar on/off with JavaScript.
We want to pull from Vimeo as video content is starting to occupy too much of our available space on our LMS.
Again, thank you for your assistance and insight.
For the percent range use:
SLplayer.SetVar("Videotime2", data.percent*100);
Thanks for the replay. That seems to have done it and I've learned a bit more.
Cheers!
This post was removed by the author
Hello Russell,
your SL has saved us. Thank you so much!!
Would it be possible to adjust that SL Project and change the end time of the video to 80%. What I mean is the video status should change to 'ended' when user has viewed 80% of the video and not the entire video.
Unfortunately, we couldn't figure that out.
Thank you in advance!
Hello Büsra,
I created another storyline variable called VideoPercent.
There is a trigger that changes the videoStatus variable to Ended when the VideoPercent changes and is greater than or equal to 80.