Presenting Event Video with Portable Network Graphics and JavaScript

September 20, 2018
Jim is an independent consultant working in the fields of training, communication and change management. He has extensive experience supporting large scale organizational change efforts through the creation of training and communication programs. Jim is a licensed PROSCI professional and holds a Ph.D. in Organizational Psychology from the University of Akron.
Wizard 21 posts
Followers: 21 people
Independent Consultant
3

Presenting Event Video with Portable Network Graphics and JavaScript

Jim is an independent consultant working in the fields of training, communication and change management. He has extensive experience supporting large scale organizational change efforts through the creation of training and communication programs. Jim is a licensed PROSCI professional and holds a Ph.D. in Organizational Psychology from the University of Akron.
Wizard 21 posts
Followers: 21 people
September 20, 2018

Play

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

Comments (3)
2018-10-03 13:45:46
2018-10-03 13:45:46

I agree the absence of good video controls and the need to use javascript frustrates the average Captivate user. The fact that the video plays automatically has always been an impediment to using video in Captivate. Love the new features in 2 – 19 but could really use an overall on standard video control.

Like
(1)
2018-09-21 14:54:19
2018-09-21 14:54:19

Great article (as was your other post). I’ve been frustrated with Adobe’s penchant to focus on edge cases (VR?!?) but ignore things that seem so obvious (to me, anyway) to need enhancements such as make the playback controls skinnable, allow for fullscreen playback, etc. without having to figure out workarounds/hacks to make it happen.

Like
(1)
(1)
>
eLearning Guy
's comment
2018-09-21 15:58:27
2018-09-21 15:58:27
>
eLearning Guy
's comment

thx for the feedback.

I wouldn’t mind seeing enhancements like a more powerful Skin Editor.

Just my opinion, but I imagine all design decisions require trade offs and the Adobe development team may have other priorities.

I also wouldn’t mind being able to zoom with the scroll wheel on my mouse. c&g I can’t count the number of times I’ve tried to do that.

Like
Add your comment