Forum Discussion

KatelynThedf665's avatar
KatelynThedf665
Community Member
3 days ago

Autoplay Storyline Project when Embedded in Website - Possible?

Hello!

We are currently weighing our options for some eLearning content we are developing and using it sort of as marketing materials. We are trying to develop a Storyline project that starts with some "video" animations (not an actual video in the project, but some text and visuals that animate in) and audio and then leads into some interactivity. We will be embedding it into our company's website. I know how to embed the project with iframe, but I was wondering if there is an option for the project to autoplay when it is visible on the website. Right now when I embed it with iframe, I see a black screen with the project title and a large play button. We want this to look more seamless when it is integrated into the website. I feel that if users have to pause and click play, it is unlikely that they will interact with it and will likely keep scrolling versus it autoplaying and catching their attention. Is this a possibility?

  • There are various reasons (including Web Content Accessibility Guidelines) why auto playing media isn't recommended or indeed possible, but I do know a trick to skip the standard 'start screen' at the beginning of a Storyline course.

    Add a blank slide at the very start of your course, remove the Back and Next buttons, and add a trigger to "Jump to Next Slide when timeline starts".

    This makes the course automatically advance to the next slide (your beautifully designed starting screen) without asking the user to press 'play'.

    However, this won't work on mobile devices  and if your course contains a large video or audio file, it may appear to be 'stuck' on the first screen while the rest of the course loads, depending on the file size and connection speed.

    So, you may want to consider adding a note, GIF or icon on the very first slide to make it clear the course the loading. Like this:

    https://jonathan-hill.s3.eu-west-2.amazonaws.com/elhc449b/story.html

    This technique can be used to remove the 'start screen' in Storyline blocks in Rise, too.

    Ultimately, the reason the 'start screen' exists is most browsers block autoplaying media for accessibility reasons. This blog covers why:

    https://www.boia.org/blog/why-autoplay-is-an-accessibility-no-no 

    However, a video that has no audio and automatically stops playing after 5 seconds or less does not require controls to conform to WCAG 2.1 AA. 

    But I also understand why the 'start screen' is undesirable for this use case. Having used Storyline in a similar way before, this is how I've customised my content for the Web.

     

  • I hate to contradict Jonathan, however, the blank slide with a trigger to jump will work for some and not for all and also has unfortunate side effects where audio or videos won't play.  The reason this appears to work for some is that Chrome logs and applies ratings to pages you visit if you always play mead on those slides the rating allows autoplay and disables the browser block.

    It is better to have a button as the media should be user initiated. As it will always be a black screen on mobile probably best to find another way to do this.

  • Thanks Phil, I'm aware this method has some drawbacks and doesn't work in all circumstances and in all browsers. It's always best to avoid autoplay for the reasons covered in that blog, too.

    But having used Storyline in this way before for Web-based 'marketing' type interactions, the blank slide has been the only way I've found to remove the slightly ugly 'start screen'. As with all novel uses of the software, testing is important.

  • I have never been able to get the blank slide to work, hence my feedback. I wasted a day of my life (all be it paid for) on this for a client and didn't find any reliable work around. 

    I don't doubt it works for some, hence why I didn't want to contradict you.

    In this case it maybe better to use a different method, a muted video for example will always play, you could animate text and graphics in a web page quite easily. Storyline is probably overkill and not suitable here.

  • Thank you both so much for the options and insights! I appreciate you taking the time to provide this information! The main reason we plan to use Storyline is that after a few seconds of "video" (animations/transitions/etc), the project will present an interactive image that we would like users to click on to explore. We would like users to be able to click on a portion of the image and "zoom in" to that area or click another part and "zoom out". Since we already have Storyline licenses, we felt that Storyline would be the best option. 

    I will take your feedback to my team, and we will consider our options! Thanks again!

    • Jonathan_Hill's avatar
      Jonathan_Hill
      Super Hero

      Hope you find a solution, Katelyn. I use the 'blank slide' trick on a lot of my ELH Challenge demos and for most desktop users it seems to work. On mobiles and certain browsers it doesn't work, though. There's no foolproof solution to this and that may take you down another route, like interactive video made in Camtasia or similar. Good luck!