HTML5 video capabilities have been being blogged about for five years, but when looking into the possibilities and potentialities of HTML5’s video support there are a ton of exciting yet speculative posts about what this can and will mean.
Earlier this year (January 2015) YouTube switched from Flash to HTML5 video and it seems like every day is another nail into the coffin of flash, and cements HTML5 video as the future of web moving images, that is, well, already here. To take advantage of using HTML5 video; the following is a roundup of some helpful resources to prepare your video before it goes live on the web, from shooting, to editing, to post-production.
There are beautiful, detailed analyses floating around the web that I owe gratitude for publishing their thoughts and comparisons of formats and projections; and I encourage people to read around. Included here is a roundup of my thoughts.
Why would YouTube switch to HTML5 Video?
HTML5’s adoption of Adaptive Bitrate (ABR) is all-important in YouTube’s decision to changeover. ABR, which lets video change resolution for viewers based on network quality, has reduced buffering by more than by as much as 80 percent on heavily congested networks. This means resolutions that are friendlier to slower connections by optimizing a quality:speed of download ratio. Also notable about HTML5 video, is its support of the VP9 codec (more to come on that below, hang on!), and new APIs that let YouTube show fullscreen videos that can be manipulated by standard HTML UI. (More here on Tech Updates).
So you are preparing video for the web and taking advantage of this exciting cusp-point; standing on the edge of new video technologies? But first you need to know how to start?
Yes? Here you are:
Ways of acquiring video:
Shooting video yourself:
There are few reasons why, to start, you need to shoot video with anything other than your cell phone, web cam, or screen recorder. The one big flag is wanting to have exceptional or even quite-good sound. Being able to record sound well is complicated and can be very case-specific. In these cases I recommend finding a collaborator who knows sound well and can contribute equipment, finding another blog post about sound for web, or researching yourself and shelling out some cash. You can also find work arounds or work withins (using your obstructions as creative limitations).
Found Footage/Appropriating Footage:
Fair dealing for the purpose of research, private study, education, parody or satire does not infringe copyright. (If you get a cease and desist letter though you should stop.)
Alternately, find material to work with that is public domain or creative-commons licensed. More on creative commons here.
And try these sites to find footage to work with:
Record Your Screen:
Quicktime X will record your screen for you and save a .mov file for you immediately after. Use it to record your cool and savvy demo videos or action happening on your screen and elements therein to make something cool. The two main ways to do this is to take big long screen records and edit them in other software.
Or, use a screen recording program that has editing, titles, effects, etc. built right in. I have heard really good things about ScreenFlow and Camtasia. But they are investment softwares, running you $99 and $119, respectively.
-Vine style. Also known as “in-camera editing”. Also known as pressing play and stop when you want things to start and stop. This is a very chill and casual way to edit video.
-iMovie. everything imports into iMovie which is a joy. Very user-friendly. I don’t know if I would if I say that it is “intuitive” but once you know how to use it you could trick yourself into thinking it’s an intuitive program.
-Final Cut Pro X. This is iMovie for someone who wants to pay for an industry standard but want it to have the same learning curve as iTunes. I feel like Apple made it a “user-friendly” and assumed that users wanted an inefficient and unsophisticated program so they could market it to more casual video makers who don’t know how to be exacting with their technology. It’s only fair if you are good at technology to one-up the situation.
–mPeg stream clip (also very powerful video converter and encoder). Its Export dialog provides more control over your finished video than some commercial products. i incorporate this into my workflow sometimes because it’s really barebones in a great way.
Other great free things I love:
Handbrake | https://handbrake.fr/
HandBrake is a tool for converting video from nearly any format to a selection of modern, widely supported codecs.
Miro | http://www.getmiro.com/
A beautiful, simple way to convert almost any video to MP4, WebM (vp8), Ogg Theora, or for Android, iPhone, and iPad. Batch conversion, custom sizing, and more.
This is what technology you use in your video programs to appropriately compress videos. The codec, also known as the amount of change that occurs between frames. There have been a ton of different codecs over time as new video technologies change every few years or faster. These days we’re largely using H264 for max-compatibility .H.264 or MPEG-4 Part 10, Advanced Video Coding (MPEG-4 AVC) is a video compression format that is currently one of the most commonly used formats for the recording, compression, and distribution of video content. H.264 is perhaps best known as being one of the video encoding standards for Blu-ray Discs; all Blu-ray Disc players must be able to decode H.264. It is also widely used by streaming internet sources, such as videos from Vimeo,YouTube, and the iTunes Store, etc etc etc
You will not really see these specs when you select export from your editor even see this an an option in the menus you are using except if you dive into the advanced settings.
In iMovie, select “share > export for web”, in Final Cut Pro, you may just try to export your video and it will upload itself to youtube even though you didn’t think you allowed access to a youtube account. At least you don’t have to worry about codecs that much . Instead select .mov or .mp4. Or export for web and leave it at that.
MOV and MP4 are two file containers that are usually used to hold lossy video. Lossy video compression methods discard portions of the video data that it deems to be of less importance. The resulting video are substantially smaller while maintaining the quality loss at a minimum.
VP8 is the codec for WEBM
H264 is the codec for MP4, MOV
H264 still leads VP8 in terms of quality but the future is up definitely up for grabs.
HEVC vs VP9
H.265 was originally developed as the ‘HEVC’ (High Efficiency Video Coding). It was touted as being the official successor to H.264 back in 2013. Like H.264, the codec must be licenced with hardware manufacturers and software developers paying a fee.
By contrast VP9 is open source and royalty free. It was developed by Google as a successor to VP8, the moderately successful alternative to H.264. During its development VP9 was dubbed ‘NGOV’ (Next Gen Open Video) and Google has already integrated support into the Chrome browser and YouTube.
Initial reports suggest H.265 has higher image quality while VP9 is more reliable for streaming.
Embedded Video Hosted Locally
This is what a video stack looks like and is good to use to support older browsers:
<video width=”320″ height=”240″ controls> <source src=”movie.mp4″ type=”video/mp4″> <source src=”movie.ogg” type=”video/ogg”> Your browser does not support the video tag. </video>
The controls attribute adds video controls, like play, pause, and volume stored locally and not embedded.
It is a good idea to always include width attributes. This is one time in building a site where you should consider setting a height as well in order to ensure aspect ratio integrity. If height and width are not set, the browser does not know the size of the video. The effect will be that the page will change (or flicker) while the video loads.
Text between the <video> and </video> tags will only display in browsers that do not support the <video> element.
Multiple <source> elements can link to different video files. The browser will use the first recognized format.
Grab the embed code underneath any given video on YouTube. Click “Share” then “Embed”.
“?autoplay=1” at end of a video you are sourcing from youtube will autoplay the content once.
Vimeo code generally looks like this:
<iframe src=“http://player.vimeo.com/video/42358247?title=0&autoplay=1” width=“500” height=“300” frameborder=“0” webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
To add a paramater, simply append ? onto the end of the URL. Log into Vimeo to grab your embed code and play with some more options. For multiple parameters add an ampersand in between each one.
Check out fitvid: a jQuery plugin to make iframes/videos responsive.
For more parameters and advice check out google! And/or articles like this one:
Mozilla guide for HTML developers using video and audio elements