Forum Discussion
Embedded Videos and Locked Navigation
Couldn't you use the "When the media completes" trigger?
I appreciate that suggestion, and I did test adding a trigger but because the video is embedded using Insert > Video > Video from Website there is no way for Storyline to know when the embedded video has completed. I added parameters to the embed code to start/stop the video where they wanted it, but that isn't communicated or connected to the trigger.
By using Insert > Video > Video from Website, you can embed a YouTube video, but the embedded player does not expose the YouTube IFrame API, so events such as ENDED cannot be detected directly.
A more flexible approach is to embed the video through a Web Object that loads a custom index.html. This allows you to initialize the YouTube IFrame API, listen for the player's onStateChange event, and detect when the video reaches the ENDED state. When that event occurs, use the Storyline Player API (GetPlayer().SetVar()) to update a Storyline variable (for example, videoComplete). You can then create a Storyline trigger to enable the Next button or advance to the next slide when that variable changes.
Alternatively, if you want the Next button to be disabled each time the learner revisits the slide, disable it when the timeline starts and enable it only after the video reaches the ENDED state. This ensures the learner must watch the video to completion on every visit before the Next button becomes available.
Example HTML and demonstration are provided below.<div id="player"></div> <script src="https://www.youtube.com/iframe_api"></script> <script> function onYouTubeIframeAPIReady() { new YT.Player("player", { width: "100%", height: "100%", videoId: "taIdxEH_Kus", events: { onStateChange(e) { if (e.data === YT.PlayerState.ENDED) { window.parent.GetPlayer().SetVar("videoComplete", true); //optionally enable the next button when the video is complete const next = window.parent.document.querySelector('#next'); next.classList.remove('cs-disabled'); } } } }); } </script>Everyone has been very helpful and I appreciate the insights and information everyone has shared. Nedim, what you are suggesting is something I haven't used, so this will be new for me. What you are saying about the API makes perfect sense and I would like to test your approach.
I also thought I'd share the embed code that I've been working with in case it's helpful in recommending a solution, but also to anyone in the future who may have a similar issue they are troubleshooting.
<iframe width="960" height="540" src="https://www.youtube.com/embed/UzFblFnvcGU?autoplay=1&controls=0&start=30&end=170" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen> </iframe>I found this support article that mentions right-clicking the Web Object Placeholder to access the ability to edit:
https://www.articulatesupport.com/article/Storyline-360-Editing-Web-Objects
Not having done this before, I'm learning as I go. It appears that I need to save that html script as an index.html document in a folder. Where I'm fuzzy on comprehension is whether this method is a one-and-done to embed it into my Storyline course? Does that folder and html file need to be kept with the project file, or is it just needed until the project is published?
I've never had to delve into the world of scripting for a project, so I appreciate the opportunity to learn how to solve this unique challenge. I love learning new skills and methods to make training better for the learner!
