Category: Development

Media Compression : Audio and Video Best Practices

The majority of video and audio content delivered on the web has transitioned to HTML5 over the past 2 years. The compression process has gotten simpler as long as you take into account, remembering to compress your content and following a couple of simple guidelines. In order to deliver optimal content across devices we have two simple ingredients:

1. The H264 Codec which is part of Mpeg4.
2.  The native HTML5 player allows for a simpler delivery of audio and video assets across devices without having to license a player.
Understanding the Video/Audio Compression Process – Tips
Within our workflow, we divide video and audio product into four main steps.

 

1. Video & Audio Assets
It all starts with capturing the content. Whether you are working with an internal group, your own team or a 3rd party it is always important to get the final assets on a hard drive at the highest quality possible. This will allow you to full control over compression and add the bonus of allowing you to recompress in the future when new technologies or codecs are introduced or optimized. Hard drives continue to drop in price, you can now get 4 terabytes for less than $150. Based on the quality size and compression you are using you can store 2-10 hours of content on the drive.

 

2. Compression
Here’s where the fun starts, it’s gotten easier and easier to compress content with the latest tools whether free or full-featured tools allow you to easily drag and drop a setting, click compress and squeeze your content to the optimal size.
First, when you are shooting your video, there are several formats and sizes that you can shoot at today. Most video cameras are shooting at HD which offers a 1920 x 1080 pixel size. This is a high-res format and you can notice every little detail of your content. Typically we shoot and capture at this quality and then size down the assets to make it easier to work with in editing. What’s nice is that the majority of devices support HD or at a minimum SD quality so the content you are capturing looks amazing.
The next step is to select a size for displaying your video content within your content. The following graphic shows some typical guidelines and sizes that we start with. Today,  you can basically deliver in any size and format. Your video can be delivered 16×9, 4×3 or any other aspect ratio you can think of which gives you a lot of creative license.  As a  guide, we use 960×540 as a default size.
When capturing your video, it is typically shot at 29.97 frames per second (FPS). When you compressing your content,  we typically deliver at a lower frame rate of 10-15 fps. This allows for a much smaller file size and makes it easier to deliver to your audience.

Key frames are used when scrubbing your video forward or backward using the shuttle play bar. If you don’t have enough, you’ll notice inconsistent behavior and skipping while you move the shuttle bar. We use 4 times the frame rate to define the number of keyframes. So if our frame rate is 15, our keyframes would be 90 (4 x 15).
The other variable we want to focus on is the data rate of your video. Based on the length of your video, the dimensions within your content we will target 800 – 1200 kilobits per second for our data rate. If you have good quality video this will give you great compression without noticeable loss in your video content.

We also get a bonus by using newer codecs, such as H264. They allow for a technique called pixel doubling, so if you compress your video to a size of 320×240, you can stretch or size the video 2x, in this example 640×480. This allows for smaller sizes but offering a larger format for delivery.
If your video is coming from an analog format, don’t forget to deinterlace your content to remove the banding effect.

 

Compressing Audio
The other important ingredient most of us forget is to compress our audio. For audio, you want to make sure you :
  • Downsample the audio from stereo to mono
  • Switch from 44khz to 22khz
  • Use the MP3 codec at 64 kbit/s for the bit rate
This will give you a much smaller size and still have great quality content.

 

3. Authoring

When authoring content, whether you are using a tool or building in html you want to create a workflow to insure you will be able to easily update, edit and swap out audio or video assets based on your needs. Selecting a workflow where assets are external and named for understanding a week, month or year after you have launched your project will help to insure you can quickly identify and update assets as needed.

 

4. Delivery

When delivering your content to your audience, based on the size and location you want to gather feedback and you may want to consider adding a content delivery network if you support hundreds of views a day

 

Tools to Check Out

There are dozens of tools that can be used for audio and video compression, here’s a short list of what I use daily:

Handbrake.fr – a free opensource video transcoder for

Adobe Media Encoder – if you have the Adobe Creative Cloud you can install and utilize this app for Mac and Windows and compress content.
Hope that helps, I’ll jump into some additional details, tools and post some samples.

Join us next Thursday for Best of LS DemoFest 2018 @eLearningGuild

One of my favorite parts of eLearning Guild events is DemoFest. During Learning Solutions last week, it provided an opportunity to look, learn, share and hear what worked, what didn’t and how a project evolves from concept to launch. There were over 50 tables to visit, and you learn about this year’s favorites on a complimentary Best of DemoFest Webinar on Thursday, April 12 at 10:00 AM PT.

We’ll be presenting our project which won an award for Best Social Collaboration Solution for Community Dashboard for C-Suite Idea Exchange.

Register below to learn about the award-winning projects in several categories and get some great ideas to apply to your work!

 

Watch the Recording at https://www.elearningguild.com/olfarchives/1586/best-of-learning-solutions-demofest-2018/

 

Inspiration: Getting Over It – Focusing on Frustrating the User

Most games today, focus on telling a story, providing a puzzle or provide you with a challenge. As you advance, you can level up, saving your progress or restarting from the last point. This new game by Bennett Foddy offers the complete opposite where he provides impossible gameplay and forces you to lose everything and start over. Good, bad, or just something you need to try because it is just different. Why not?

Tool: Zoom Meetings for Collaboration (Desktop / Mobile)

We moved to Zoom last month and loving it. I work with several teams every day brainstorming, reviewing, and focusing on creating new experiences for our audiences. We had been a Webex house for several years and during a recent visit to San Francisco last month saw a billboard with Zoom.US on it and decided to check it out. Wow, it is powerful, what I love in the first couple weeks:

  1. Using an iPad Pro in a meeting with an Apple Pencil to quickly communicate, highlight, sketch or visualize a concept while someone is sharing their screen. Great for quick feedback and communication. Previously, would have to switch presenters, files or take a picture we can now focus on the creative side. (Quick video highlight below demonstrates remote view, while I am drawing on an iPad, viewers can see the highlights, and we can brainstorm the user experience.)
  2. Recording can be automatically saved to your desktop or the cloud and shared immediately.
  3. Quick visual feedback with icons or via chat.
  4. No problem sharing an invite and having first-time users view in their browser or quickly install and video chat with no roadblocks to date (using with several users around the world.)

 

5 Must Do’s @  eLearning Guild’s #DevLearn 2017

Excited to be attending and participating in this week’s DevLearn. If you are new or experienced attendee, 5 reminders of things to check out at the event.

HYPERDRIVE – Tuesday 3.30-6.30pm, this is a fun in-depth look at several select projects where you learn about the challenge, problems, outcomes and lessons learned. I love this session herding about what worked, what didn’t; and seeing real projects and thinking what I might apply to a future project. Each project is scored by a panel and 3 projects will be selected to present a more in-depth version on Wed.

Morning Buzz 7:30 – 8:15 – Get up and connect with the community about the latest topics and trends to have a conversation and share your insights, Wed-Friday.

DevLearn HyperDrive Showcase 1.15-2.15pm – Whether you were able to attend HyperDrive or not, check out this session for a little more time and insight on the winning projects. Must watch for ideas and inspiration.

The Guild’s keynotes have been amazing in recent years, but especially loved Glen Keane earlier this year at Learning Solutions and walked away inspired and excited about what we do.   Whether you have seen him or not, if you want to be inspired and get a creative boost attend his keynote 4.15-5.15 on Embracing Technology-Based Creativity.

DemoFest – With each eLearning Guild major conference, attending DemoFest on Thursday evening from 4-6 will showcase over 80 tables where you can learn about projects that were using in VR, Mobile, Onboarding, Academic among other themes. This is a great opportunity to connect with peers and learn about what they did, what worked and what didn’t and while listening and viewing think about what you like, what you don’t and what might apply to your next project.

Hope to connect, share and swap notes!

 

Download a copy of the #OLC Learning Brainstorms, Tips & Techniques Jam Session

Get the most out of your conference experience by starting with this morning brainstorming session with award-winning eLearning expert Nick Floro. You’ll explore design trends and walk away with resources, tips, and techniques to help you build your next generation of learning.

My 2017 Distance Teaching & Learning Conference #DTLC Preso Decks

 

Keynote: DESIGNING ELEARNING: THE FUTURE IS TODAY
Creativity and design thinking are essential for educators to provide engaging learning experiences. In this talk Nick will unleash your creativity showing how good design in everyday things can be a source of inspiration to spark ideas for new and better ways to teach with technology. You’ll get practical tips, see examples of new tools and learn about innovative design strategies that can be applied in simple ways to produce learning results without a huge team or budget. You’ll also hear about several trends, just around the corner, that all instructors and learning designers need to know to be an effective 21st century educator. Fasten your seat belts for a fast-paced and fun exploration of design for learning with technology.

Session: USING YOUR MOBILE DEVICE TO CREATE NEW LEARNING OPPORTUNITIES

Learn about amazing apps and new techniques for quickly creating, editing and delivering new course content using just your mobile devices to maximize learning. You’ll also learn how to best capture, record and share content via your mobile devices.

Workshop: eLEARNING EXPERIENCE DESIGN: TURNING IDEAS INTO REALITY
Learn the latest strategies, workflows, and tools for creating eLearning products using a prototyping design process. Get hands-on practice communicating a concept beginning with low-fidelity mock-ups; gather user feedback and translate into high fidelity prototypes before you start development. Come to this session with at least 2 project ideas for further development.

 

 

 

2017 Distance Teaching & Learning Conference DT&L Conference