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
}