How To Speed Up HR Training and Compliance Videos

Thu May 21, 2020 by Steven Senkus in the office, education

Picture this: one morning, you’re sitting at your comfy standup desk catching up on the latest tech news. You check in on social media, crank out code, get ready for another meeting. It’s a typically glorious day with productivity and relaxation on the horizon…

Suddenly, without warning, your email inbox receives a new message from HR:

“You have XXXX Training Compliance Certification to complete!”

Great! Another thing to do while in addition to your already growing workload!

Corporate Training and Compliance Programs

If you find yourself working for a mid-size to large corporation, you will undoubtedly run into corporate training and compliance programs.

These programs are typically performed annually to ensure that employees are educated about data policy, security and passwords, customer PII, and other policies you company has deemed necessary.

Typically, these courses are just CYA for HR purposes. If you have worked in the tech sector for a minute, this stuff is at best a refresher. Mostly it is just a huge time sink filled with cheesy dialog, outdated questions, trick questions on quizzes, and a volume of content you could easily find on OWASP.

Technology-wise, these things are often running on outdated tech! Many use Flash, Silverlight, or some other locked-down software. If this is the case for you (use your Developer Tools to verify), you’re stuck having to watch the entirety of these programs!

Although many of compliance and training programs are ancient, I’ve noticed the newer compliance and training programs are HTML-based. They tend to use the native HTML <video> element for video followed by HTML-based quizzes. The UI video controls will often be locked down (i.e. Fast-Forward, Playback Speed) for the average user. However, us developers know that with the power of JavaScript, we can speed these videos up!

Tutorial

Let’s use YouTube as an example of how we can get circumvent the playback speed of these videos.

Step 0 - Go to YouTube

Open your favorite YouTube video in Chrome or Firefox or any web browser you use with Developer Tools enabled. For the purposes of this tutorial, I will be using Chrome on Mac OS.

NOTE: If you are using Safari, make sure to enable your Developer tools first.

Step 1 - Open your browser’s Developer Tools to Inspect DOM

Using the keyboard shortcut Command + Option + C, open your Developer Tools. In Chrome, there is a handy Inspection tool that you can use to view and alter the source of your web page. It can also be accessed using the keyboard shortcut Command + Shift + C. With this tool, you can explore the web page’s DOM to find the <video> element.

Step 2 - Find the `<video>` element

NOTE: This step is optional

Verify the location of the <video> DOM element. You may run into issues if it is contained in an <iframe>. Navigate around the DOM to find the the <video> element. It will most likely be buried in a bunch of nested <div> elements.

HTML video element

Step 3 - Execute JavaScript in console

Execute the following code snippet in your browser’s console:

document.getElementsByTagName('video')[0].playbackRate = 4.0

This code will play the video at 4x speed, which will play a 4 minute video in one minute.

Let’s break this code down step-by-step to see what’s actually going on:

Get all <video> elements - Reference
```
document.getElementsByTagName('video')
```
Get the 1st element in the collection - Reference
```
document.getElementsByTagName('video')[0]
```

Get the current playbackRate property - Reference

document.getElementsByTagName('video')[0].playbackRate

Set the playbackRate on the <video>element to a faster rate - Reference
```
document.getElementsByTagName('video')[0].playbackRate = 4.0
```

HTML video element

LEGAL NOTE: This technique is publicized solely for entertainment purposes (😉), so make sure to never do this. Also, I’m going to assume that compliance and training software has metrics on video view time. You have been warned!

Step 4 - Bask in your success

Corporate training and compliance is usually just verification of common sense. While they can be helpful for a lot of people, they mostly end up being drudgery for us tech workers.

With the code snippets above, you’ll save hours of your precious time. Make sure to stay on top of the latest security trends to keep yourself, your customers, and your company safe. Security is an everyday practice!

Until next time, happy hacking!