About HTML5 Video via w3schools.com/

• Before HTML5, there was no standard for showing videos on a web page.
• Before HTML5, videos could only be played with a plug-in (like flash).
• The HTML5 <video> element specifies a standard way to embed a video in a web page.
• Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <video> element.

Note: Internet Explorer 8 and earlier versions, do not support the <video> element.

How we embedded our video in HTML 5

We started with a .mov file. We wanted to convert the mov file to one or more of the supported formats (mp4, webm, or ogg). We chose to use MP4 and WEBM formats

We wanted to convert that to mp4 to get it ready for the web.

Initially used the third party site https://cloudconvert.com/mov-to-mp4 to convert the video using the h264 codec (which is a codec that was originally created for video on the iphone, it now is a stadard format for delivering video on the web).  Ended up re-encoding using Adobe Media Encoder in order to specify height and width and strip out orientation meta-data, since the video was shot in portrait mode on an iPhone but was playing in landscape on Internet Explorer.

We used the third party website http://video.online-convert.com/convert-to-webm to convert the video to webm format. We wanted to have a fall back incase the webm format performs better than MP4 in certain browsers. Then we specified height and width and sourced the files on the server like in the example below. Uploaded the files to the server and added the HTML to the page.

<video width=”320″ height=”240″ controls autoplay>
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.webm” type=”video/webm”>
Your browser does not support the video tag.
</video>