Here are files we did in class. This is just the index.html and poster image. Video can be downloaded from Blackboard. Make sure to put in the video folder
For an in depth look at HTML5 video read this article. I may reference it from time to time in class.
Video Compression and CODECs
Video is too large in both file size and data rate to put on the web raw. So we compress video on the web. There are three ways a video file is compressed.
This is short for coder and decoder. When you create a compressed video you are encoding it using a particular video encoding algorithm. In order to play the video the player has to then decode the video to play it. Because you need both encoding and decoding, the algorithms (specfic math and steps used in the processes), used to do this are called codecs for short.
Audio also uses codecs for compression. We’ve already seen the MP3 and Vorbis codecs. The three big ones we will use are:
Many of the codecs used in video are proprietary formats that you have to pay for. Some are open source. Here are the big players on the web right now
- H.264 – used in .mp4, .flv formats, the patent is owned by MPEG group. They charge a license fee. Normally you don’t have to pay it personally but the people who made the encoding tools and the playback tools (browsers) have to pay a licensing fee.
- VP8 – used in WebM format, the patent is owned by Google but they made it royalty free so you can use it without paying them money.
- Theora – used in .ogg and .ogv formats this is developed by the Xiph.org Foundation and is also royalty free like VP8.
Video Containers, AKA – File Formats
People ofen confuse codecs and file formats. While the codecs are responsible for compressing and decompressing the video and audio the file formats provide a shell to hold the data, point to both the video and audio files if they’re separate, allow extras like meta data and que points.
Sometimes the file format and codec have the same name, like with mp3. Other times, they have two different names. For example the h.264 codec can be used in .flv, .m4v and .mp4 file formats.
In our examples for HTML4 we will use
Using Media Encoder CS6
We are going to use the following video file to look at settings for
We will use it to quickly look at how to do a very basic edit of a video and also see why it is important to know at least a little bit about formats and codecs when working with a video system.
To keep your project organized it is best to make a “video” folder, much like we made folders for css and images. Save your exported files to this folder.
Browser Support for HTML5 Video
As you can see in the link above, you need a few different formats in order to play HTML5 video in browsers. There are some free software that allow you to create those files.
HTML5 Video Encoder
The following tools are free and can convert video to the formats you need for HTML5. Media Encoder CS6 doesn’t handle
Miro Video Encoder (open-source)
Easy HTML5 Video Encoder (free for non-commercial)
If you’re trying to do the initial conversion from a video source or DVD (not copy protected), you can use Handbrake to convert to h.264 and then use one of the above to get the HTML5 formats: http://handbrake.fr/
We won’t use these in class as they are not installed and I have provided videos for you.
HTML5 Video Markup
Video works much like audio. You use a <video> element to show you are adding a video and then use <source> elements to point to the differen file formats you need to make sure all browsers can play your video. Remember we will need the MP4, WebM and Ogg formats to be compatible for modern and most older browsers. Here is an example:
<video width="720" height="400" controls="controls" poster="video/myVideoThumbnail.jpg"> <source src="video/myVideo.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="video/myVideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="video/myVideo.ogv" type='video/ogg; codecs="theora, vorbis"' /> </video>
In order to save some time I’ve created files for you to use to practice with. You can download them here:
Using a Video Hosting Service
There are a few drawbacks to putting video directly on your site:
Self-hosted Video Drawbacks
- You have to create video in three different formats
- Because the video is on your site, when people watch it, it counts against your monthly transfer limit. If your video gets popular this can be a problem.
- Unless you set up a streaming server on your site (not always offered by less expensive hosting options and it means additional learning to properly export video for streaming), then your video will be progressively downloaded so watchers can’t skip around the video easily.
- There is no built-in promotion so you have to promote the video yourself.
Video Hosting Benefits
- hosting the video on their server (so your transfer limit is not touched)
- converting to differnt file formats
- serving the right file to the right browser/device
- streaming the video
- promoting the video (it’s much easier for people to find your video if it is on YouTube than your own site and if it gets popular enough, YouTube may even promote it for you)
- showing analytics about how many times your video was watched and more
- making money off of your video through ads (YouTube)
- comments and ratings on the video
- options like password protection, tools for adding captions …
Everything is not perfect of course and there are potential drawbacks:
Video Hosting Drawbacks
- You don’t have as much control over formats users can download the video.
- You don’t have a choice about which ads get shown with the video
- If people watch the video on YouTube.com then you don’t have control over the viewing environment.
- Some companies block sites like YouTube and Vimeo for their employees, so those people won’t be able to see the video at work.
- There are limits to what you can do for free. YouTube starts with a 15min video length limit but you can increase it. Vimeo has a limit of 500MB per week, 1HD video per week or 10SD per day. You have to pay to get that increased.
Tips for Uploading to a Hosting Service
- Upload the highest possible quality video you can get. Most of the time that means the original file format from your video camera. Otherwise use a format like h.264 with high quality settings for video and audio compression. Let the service handle converting it to smaller sizes and lower quality formats.
- Make sure that if you’re using HD video it is in the 16:9 aspect ratio and 1080p or 720p resolution. Other resolutions and ratios will not be treated as HD and so the service may not offer the option for users to watch in HD.
- If you’re editing the video, keep it as short as possible.
- Don’t use any material (video or audio) for which you don’t have the copyright. You could get sued. Especially if it is a large media company like Disney.
Embedding a YouTube Video into Your HTML
I’ll outline a basic process below. There are many tutorials on the web as well.
Here is my tutorial: http://profstein.clarify-it.com/d/gdjnfn