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.
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)
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)
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
Adobe Media Encoder (also encodes MP4)
OGG and Web M
“Swiss army knives”
Miro Video Converter
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
Adobe Open Source Media Framework
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
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
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.
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!
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
The latest MPEG-DASH player can be found here
I found that this works in Firefox as well now.
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
Lisa also has a course called WebRTC Fundamentals which covers this topic much more fully. See Can I Use for current browser support.
One thought on “Taking The Leap from Flash to HTML5 Video”
Pingback: HTML5 Learning Path | Zombie Code Kill