Auto-Play Video/Audio After Scrolling In View

What is this post about?

I’m building a one-stop-scroll place to store all info about my session at the ATD International Conference and Expo. Before the session, it will host the backstory and other useful, maybe somewhat hidden clues. After the session, I will also post instructions how to design and execute a session like the Escape the WORL&D at the conference.

TRY IT

Why am I posting it?

Because someone might have the same type of challenge like auto-starting a video or smooth-scrolling to the next information on the page.

When did I run into the challenge?

The problem was that I wanted to play audio and video on the screen when the user scrolls to them (when they become visible). Then, if the user scrolls away, they should pause.

The second challenge was to auto-scroll to the next video when the previous is finished (we’ll get to this in a new post).

How did I resolve the challenge?

Well, on iOS it’s not really resolved yet. Since you must touch the device itself to initiate audio and video (with audio), this solution is not for mobile yet as is.

Challenge 1 was how to play audio or video when it becomes visible through scrolling.

Try it here

As you scroll down and the first video becomes visible, it will start playing. As you scroll more down further, and the video disappears, it pauses.

This is done through JavaScript after exporting the Articulate Rise module. I’ve used a jQuery plugin called inview. Inview allows us to trigger events (like show and hide, play or pause, etc.) when an HTML element (like text, links, images, videos, etc.) comes into viewport (you can see it), and leaves the viewport (can’t see it anymore) during scrolling.

The next post will be about how to use it in Rise but first, let’s get familiar with the actual plugin.

1. Download the jQuery Plugin from:

https://github.com/protonet/jquery.inview

2. The downloaded package has an example folder with some simple demos. Try those first to see how inview works.

3. Change some of the settings in the example or add your own content. Prototype with an audio or video where you scroll up and down.

TIP: you may not want the scrolling effect trigger a fade all the time or trigger playing the audio. Let’s say you want this experience only the very first time you scroll. After that, you just want to show the element.

Why would you do that? Imagine if you’re telling a story. Going forward, you are revealing elements of the story but scrolling back you don’t want to fade in and out everything again. Or, play the audio from the beginning every time you scroll over it?

How did I resolve this in my Rise example? After playing an audio completely, I add a “played” attribute as a CSS class to the HTML element that holds the audio.

This is in a function where I pass the audioPlay variable to tell which audio we’re selecting (if there are multiple audios on one page).

$(".audio-player__play:eq("+audioPlay+")").addClass("played");

This line adds a CSS class, “played” to the audioplayer element. When this particular audio comes inview again, first I check if it has the CSS class “played” or not. If not, I can trigger the play. If it does, I won’t start playing it.

if ($(".audio-player__play:eq("+audioPlay+")").hasClass('played'))
{
// already played, no action required
}
else
{
// not completely played yet, let's play the audio
}
Share:

4 thoughts on “Auto-Play Video/Audio After Scrolling In View

    1. Matt, I know Safari is tough. That’s why I mentioned in the post that this solution is not working on it yet. Try this: http://www.rabbitoreg.com/examples/atd2018/goldfish/#/lessons/VBXy0uqAe9-AtBU59fITWL36DwJ4IfZN?_k=86nn3w I wonder if this works for you. There are gifs and videos mixed in the story. The video to check is the woman standing in a ray of light. This is a video autoplaying and autolooping, slightly changing the lights around.

  1. Hi Zsolt,

    I am trying to find a solution to the following in a Rise course I am developing:

    * Storyline Block with audio automatically plays after a Continue Button, and this is good.
    * With Setting as Restricted and the Continue Button following the SL Block set at “Complete Block Directly Above,”
    Continue button does not display disabled, it shows as enabled before SL Block audio completes and allows learner to move forward before finished, and
    When Continue is clicked, the SL block audio continues to play even when it is scrolled out of view

    I have reviewed everything I could find on eLearning Heroes and your article: AUTO-PLAY VIDEO/AUDIO AFTER SCROLLING IN VIEW.

    I am unsure what to add/change in the published Rise Web file to enable the function you describe in your article.

    Any chance you could provide some detailed instructions? I am a novice, but would be eternally grateful.

    Best,

    Marianne

Leave a Reply

Your email address will not be published. Required fields are marked *