Click to Play Project

Some time ago I pitched a presentation design to a potential client who worked in video post production. Though they ultimately went “in house”, I really liked the final design as it relied heavily on their award winning videos and graphics. This showcase presents an Adobe Captivate 2019 presentation based on that design.

Central to the design was including a video player within the presentation. While experimenting with the graphics and video, I found that the content of the background graphic really drove the best position for the video player in order to get a pleasing effect. In the end, I found that three positions for the video player worked for all background graphics: middle-left, middle-center and middle-right.

With the design in mind, I set to work creating the Captivate project. However, getting the project to reflect my design resulted in some challenges in terms of both the control and “look and feel” of Event Video. I’m sure there are other ways of putting this material together, but the solutions I found are below.

Portable Network Graphics (PNGs)

I really wanted a “clean” design, with subdued controls, in order to focus on the graphics and video. This presented the first couple of challenges. First, I couldn’t find and onboard Skin that looked and functioned as I wanted. Second, while video playback is likely optimized for the specific requirements of Captivate, I didn’t want the “black bars” (a.k.a. Letter Box) to show.

A search of the Adobe forums and web provided some suggestions, including using a streaming service that allowed more control over the interface. In the end, I remembered a brief comment from a discussion thread that basically suggested covering the black bars up with a graphic frame. My solution was similar, though I used a large page-sized PNG with a window cut in it. This allowed for a very slim video frame.

Controlling Playback with JavaScript

While the effect I got with the PNG overlay looked good, using an Event Video without a skin resulted in a couple of issues that needed to be addressed: the video automatically played when entering a Captivate slide and without a skin there were no playback controls.

Dealing with Auto Play: If you use an onboard Skin for playing video, you are given the option to disable “Auto Play”. However, if you don’t use a Skin, the video will automatically play when the user navigates to a slide. The solution I found was to “pause” the video on slide Enter using JavaScript in an Advanced Action. To make it work, however, I needed to delay the execution of the JavaScript using the “Delay Next Actions By” method to allow the video to finish loading, otherwise the pause script wouldn’t work.

The downside of the “Delay” method is that when you enter a slide, a short amount of video is played resulting in movement within the playback frame and an audio “pop”. My solution involved editing the videos so the first couple of seconds were occupied with a still image with no audio track.

JavaScript Code for Pausing Video Playback

document.getElementsByTagName(“video”)[0].pause();

Creating Playback Controls: The general method used for the playback controls involved using a smart shape as a button and then adding JavaScript to the button as an action. A good overview of this technique is documented by Adobe and presented in a video by Paul Wilson.

My twist was to call an external JavaScript function and use the Pause-Play button’s ID to control playback and change the button state. The upside was I didn’t need to create an additional variable in Captivate.

JavaScript Code for Pause-Play Button

//Video Pause-Play Toggle Button

function videoPausePlay() {
//Retrieve ID of pause-play button and assign to variable
var v_buttonID = this.document.activeElement.getAttribute(“id”);
//Retrieve TagName of the video
var video = document.getElementsByTagName(“video”)[0];

//If video is paused, play the video and change the button state
if (video.paused) {
// Play the video
video.play();

//Show the state with the “pause” icon
cp.changeState(v_buttonID,”Pause”);
}

//If video is playing, pause the video and change the button state
else {
// Pause the video

video.pause();
//Show the state with “play” icon
cp.changeState(v_buttonID,”Normal”);
}
}

Rewind, on the other hand, was a bit more problematic. While rewinding the video was pretty straight forward, managing the state of the Play-Pause was an issue since it was no longer the “active” element. My solution was to use an intelligent naming scheme for all video control buttons and then piece together the Play-Pause ID in JavaScript.

For example, all Play-Pause buttons in the project started with “g_playPause” and ended with a text string corresponding to the presentation section (e.g., “g_playPause_maven”). Since I used this scheme on the Rewind button, as well, I simply “sliced” the “_maven” text off the Rewind button and added it to “g_playPause”.

JavaScript Code for Rewind Button

//Replay
function videoReplay() {
//Retrieve TagName of the video
var video = document.getElementsByTagName(“video”)[0];
//Construct name of playPause button
var str1 = “g_playPause”; //Common text to all Play Pause buttons
var str2 = this.document.activeElement.getAttribute(“id”); //Rewind button ID
var str3 = str2.slice(8); //Slice off text that identifies presentation section
var v_playPause = str1.concat(str3); //Construct name of Play Pause button

// Pause the video
video.pause();
//Show the Play-Pause button state with “play” icon using constructed name for button
cp.changeState(v_playPause,”Normal”);

//Rewind to Beginning
video.currentTime=0;
}

Conclusion

In the end, the Captivate project came out very close to my intended design. I’m sure there are other solutions that would have worked, as well. But this one worked for me. I really enjoyed creating the original proposal for my client, and this version, as well. I’m “all about the graphics” and this particular design really capitalized on graphic and video content.

References

Jeremy Shimmerman  | Turn off ‘autoplay’ on embedded(event) video when it has no playbar skin

Paul Wilson | Control Event Video with JavaScript

Chris Ching | HTML5 Video pause and rewind

Matt West | Building Custom Controls for HTML5 Videos

Media

NASA GSFC Conceptual Image Lab | Bennu’s Journey

Walt Feimer and Michael Lentz (Animators)

Macrovector – Freepik | Laptop tablet desktop mobile 

NASA.gov | Searching for Signs of Life on Mars

NASA.gov | Shields Up! (Dynamic Earth)

Aries Keck,  Patrick Lynch and Greg Shirah (Visualizer)

NASA.gov | Maven Targeting Mars