by in Developer Notes

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>

Leave a Reply

You must be logged in to post a comment.

About Leon Rainbow

Leon is primary lead for Inforest Communications graphic and Web design services. He has over ten years experience in Web design and development and is proficient working with open­source CMS systems. He holds an associates degree in Computer Graphics from Mercer County Community College. Leon Rainbow is also a well known artist in Mercer County who creatively combines graffiti, street art and other artistic forms into innovative projects and events. He reaches out to wide audience, from galleries to the walls of inner cities. Leon curates two annual art festivals in New Jersey for area painters and the community as well as dedicating his civic duty to teaching after­school art programs in Trenton and Princeton, NJ.