HTML5 Video

WP has a video shortcode you can used to add an .mp4 video to your website. However, I couldn’t find where you could add a splash or poster image, which defeats the purpose of the shortcode (it was tooted as an alternative to plugins.)

Plus, the mp4 would play in Firefox.

So let’s look a pure HTML5 video. Here is a good resource for the html and code behind it, according to the IE Dev Center:

Adding an HTML5 video control to your webpage

http://msdn.microsoft.com/en-us/library/ie/hh924820(v=vs.85).aspx

there is a poster image example on there as well as the different video formats.

Turns out HTML5 is good at listing multiple formats for video in an orderly [coded] fashion.

Not converting videos.

Here’s a great place to get your hands dirty practicing it:

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all
based on the official W3Schools page: http://www.w3schools.com/html/html5_video.asp

More Resources:

http://www.awwwards.com/20-html5-video-websites-examples-and-resources.html

http://www.html5rocks.com/en/tutorials/video/basics/

View supported browsers: http://caniuse.com/video

You need 3 main video formats for browser compatibility: mp4, ogg, webm

Here a free resource to convert: http://www.mirovideoconverter.com/