Welcome to my review of the 6th course in the HTML5 learning path on Pluralsight, which is authored by online video and web development consultant Lisa Larson-Kelley

Taking The Leap from Flash to HTML5 Video

Scope of This Course

This course is suitable for anyone interested in Flash and/or HTML5 Video, and should give you a much better understanding of the pros and cons of each technology. It is 2 hours 48 minutes long as standard playback speed.

Overview of Online Video Today

This begins with one of the key points from this comScore article: 182 million U.S. Internet users and watching video online. Lisa Larson Kelly explains the high expectations that users have, which are often not met.

Strengths and Weaknesses of Flash

This best article on this that I’ve found is on sitepoint

Also Trivantis wrote about this in 2010 when HTML 5 was very new.

Finally see Media College’s view, although this is an even older article that does not compare it with HTML 5.

The points that Lisa raise are different to these articles, but complimentary.

Lisa explains the difference between Progressive Delivery, HTTP Streaming (more efficient),  RTMP streaming (Realtime Messaging protocol) and peer to peer (Realtime media flow protocol).

Strengths and Weaknesses of HTML5

Lisa notes that HTML5 video is roughly equivalent to how Flash was back in 2002. You might want to take a few seconds for this point to fully sink in.

There are multiple codecs associated with HTML5 video but not a single one supports all devices, which kind of sucks.

Also mentioned here is Mozilla’s popcorn project for interactivity using JavaScript.
Recommended Approach to Reach The Widest Audience

Lisa explains that the top 3 priorities that you should balance are:

Reaching the largest audience
Encoding content efficiently
Supporting specific advanced features

In practice this means either:

Flash first with a fallback to HTML5, or
HTML5 first with a fallback to Flash

Covered here is advice on which to choose. If you decide that you want to learn SWF Object, try learnswfobject.com

Encoding Video Into Supported Formats

Flash Video Formats

This begins by explaining the structure of video formats; the key components Container, Video Codec and Audio Codec.

You can read more on these Flash video codecs:

Sorenson spark (low quality and bitrate used in FLV container)
On2 TrueMotion VP6 (mid quality used in FLV container)
H.264 (used in MPEG-4 container)
MPEG-DASH

Flash Audio codecs

Nellymoser’s Asao (low quality and bitrate used in FLV container)
MP3 (used in FLV container)
HE-AAC (used in MPEG-4 container)
Speex
Opus

This diagram shows the components of the Advanced Audio Codec

Also learn all about the DASH Industry Forum
HTML5 Video Formats

Lisa paints the patchy picture of video adoption that we have. This is gradually changing and so see can i use for latest information.

Also see HTML5 Video on wikipedia.

Recommended Encoding Tools

Flash formats
Adobe Media Encoder (also encodes MP4)
Sorenson Squeeze

OGG and Web M
Firefogg
Arista Transcoder

“Swiss army knives”

ffmpeg
Miro Video Converter
Handbrake

There are also a number of commercial products mentioned in this clip, along with advice on tool selection, and an introductory demonstration of using Adobe Media Encoder CS6 to encode to you desired format.

Encoding Best Practices

Lisa gives best practices on encoding, covering the minimum target bitrate, video dimensions and frame rate.

For getting the most professional results, Lisa recommends reading Producing Streaming Video for Multiple Screen Delivery

Playing Video in The Browser

Configure A Quick Prebuilt Hosted Player in Flash

This looks at the following options:

flow player video platform
FLV player
You Tube
Adobe Open Source Media Framework
JW Player

The URLs have changed since the course was recorded.

Here are the links to sign up for the free JW player, or the $299/year premium JW player

Create A Basic Custom Video Player in Flash

You can download Flash Builder or sign up for a free trial of Adobe Creative Cloud

This clip involves writing ActionScript, which is quite similar to JavaScript and TypeScript.

Create A Basic Video Player in HTML5

Creating a video player in HTML5 is easier than in Flash, and this clip demonstrates creating a video player that will play either mp4, webm or ogg format, whichever is supported by the browser.

You can also specify the video and audio codecs in the type attribute, as Lisa shows.

Add Fullscreen Toggle in Flash

This demo uses Flash Professional. It adds a button onto the screen, and then adds an event listener and some code to do the fullscreen toggle.

Also see Adobe’s Working with Full Screen Mode

Add Fullscreen Toggle in HTML5

Some of the code featured in this clip can also be found on Mozilla Developer Network.

You might also want to see the Living Standard for the Fullscreen API specification

Include A Preview Image in Flash

A preview image is a image that is displayed in the video area that can be clicked on to start the video.

Lisa shows exactly how to do this. Again Flash is more complex, but also more advanced and powerful.

Include A Preview Image in HTML5

Covered in this clip is adding an onclick attribute and a playVideo JavaScript function.

Controlling Playback

Add Playback Controls to Flash Video Player

If you are a Pluralsight Plus subscriber, you might want to download the exercise files so that you get flashplayer_controls_start.fla

Quite a lot of ActionScript is written in this demo, including functions for onClick, onPause, onMute and onUnmute.

Add Playback Controls to HTML5 Video Player

The video control buttons look different depending on which browser you use. In this clip, we first learn how to implement the built-in controls, and then how to implement custom play, pause and mute buttons so that the look stays consistent across all HTML5 browsers.

Capture and Use Metadata in Flash

This demo adds an info button, which displays various information about the video such as width, height, number of audio channels, seekpoints and which codecs are used.

Capture and Use Metadata in HTML

Before this demonstration begins Lisa warns that it probably won’t work for mobile devices due to the metadata not being sent to the mobile device.

The demo uses the onloadedmetadata attribute with a showMetadata JavaScript function, which fetches the values from a metadata DOM element.

This is only basic information: height, width and duration, but the track element provides more advanced information.

Look at the draft W3C WebVTT spec for full details and Can I Use to see which browsers support this.

Loop Video in Flash

This is quite a bit of work for a fairly standard feature, but Lisa shows exactly how this is done.

Also see this StackOverflow question on detecting when a video has ended in ActionScript 3

Loop Video in HTML5

This is dead easy to do, only requiring the word loop after autoplay in the html video tag!

Advanced Features

Create A Playlist in Flash

You can use this knowledge to create your very own You Tube: auto-playing the next video clip and inserting advertisements in between. You may be surprised at how easy it is.

Of course in this demo we are just hard-coding the video URLs. A full Artificial Intelligence algorithm is out of scope 🙂

Lisa reminds us that there are prebuilt video players discussed earlier in this course that may save you a lot of effort.

Create A Playlist in HTML5

This is a long demo, and involves creating a “play next” button, defining our video playlist as an array of arrays, and writing a switchVideos function.

Once the play next button is working correctly, Lisa adds a event listener to detect when a video clip has ended, so that the videos switch automatically.

Lisa also reminds us about Popcorn JS.

Take Frame Grabs in Flash

This clip creates a grabFrame function using ActionScript. Each time a “take Snapshot” button is clicked, the image is updated to the right of the video screen.

For details on the security sandbox violation issue mentioned in this clip, see Flash – How to Fix the “Security Sandbox Violation: BitmapData.draw”

Take Frame Grabs in HTML5

If you’ve seen the HTML5 Fundamentals course, this clip might already be familiar to you.

Lisa creates a canvas element and populates it with frame data from the video.

What You’ll Want to do in HTML5

Adaptive Streaming

The latest MPEG-DASH player can be found here

I found that this works in Firefox as well now.

Live Streaming

To deploy HTTP live streaming, see Apple’s developer documentation

Record From Webcam and Microphone

Eric Biedelman’s blog post on creating webm video from getusermedia

John Goulah’s Capturing A/V multimedia streams is also worth a read

Real-Time Communication

Lisa also has a course called WebRTC Fundamentals which covers this topic much more fully. See Can I Use for current browser support.