How to Add Video to Your Web Pages with HTML5

HTML5 Video Tag

The advent of Html5 has radically changed how modern day web pages are coded. In many ways HTML5 code is less with more. A more condensed code base with more options than previous versions of html. One new aspect of HTML5 is the video tag. The new tag comes complete with a library of pre-defined audio and video controls built in that help condense code and frankly make it easier to look at and understand. That being said, I wanted to give a little explanation of new file formats and code configuration.

There’s been a lot written about the newish HTML5 video tag. This post’s purpose is to give more information about what the new file formats are and how to implement them on your own web site. As it stands there are 3 supported video formats one of which is a augmented version of the previous mpeg files of the past. The other 2 are developed by organizations interested in tools for all users.

Supported Html5 Video Formats Defined

The 3 supported file formats are MP4, WebM, and Ogg and are defined by W3Schools.com below.

MP4: MPEG-4 Part 14 or MP4 is a digital multimedia format most commonly used to store video and audio.

WebM: WebM is a video file format intended primarily for royalty-free use in the HTML5 video tag. The WebM Project releases WebM-related software under a BSD license and all users are granted a worldwide, non-exclusive, no-charge, royalty-free patent license.

OGG: Ogg is a free, open container format maintained by the Xiph.Org Foundation. The Xiph.Org Foundation is a non-profit corporation dedicated to protecting the foundations of Internet multimedia from control by private interests. The creators of the Ogg format state that it is unrestricted by software patents and is designed to provide for efficient streaming and manipulation of high quality digital multimedia. Thanks Google.

HTML5 Video Tag Implementation

Take a look at the code below. It’s very readable and very straight forward. The video tag uses javascript to provide video and audio control options that are assigned in the container tag surrounding file format types. You can use one of the file formats listed here or all of them. The reason for more than one is to cover your bases in case one format isn’t supported or is more popular than another. If by chance someone is using an antiquated browser you can add a link to a more traditionally supported video format. In this case I linked to an avi.

THE CODE

< video controls >
< source src="simpsons-comeback.mp4" type=video/mp4/ >
< source src="simpsons-comeback.webm" type=video/webm/ >
< source src="simpsons-comeback.ogg" type=video/ogg/ >
Your browser does not support the video tag. You can download this video here.
< /video >

HTML5 Video Control Methods & Properties

There is a whole gallery of attributes that can be added to your video tag that can be seen here. The following are commonly used Html5 video methods and properties.

pause() - Pauses the currently playing audio or video
autoplay – Sets video to play as soon as it’s loaded.
controls – Adds controls to your videos.
loop – Control sets the video to loop.
muted – Mutes video
preload – Tells the web page to load video while page is loading.

Please Share with Your Peeps

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Float Any Web Element on Top of Another Using Z-Index

layers-combined

Z-Index Defined
Z-index is a stacking order of an element within an html page. The higher the Z-index number is the higher the element will appear with-in a page. A z-index only works in an element in positioned elements relative, absolute, fixed.
Using Z-Index to Position Elements
The following exercise has been built to float 3 pngs of the same size on top of each other. So the image you think you are seeing in front of […] Continue Reading…

Please Share with Your Peeps

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Downgrade Nexus 7 Tablet From Lollipop to KitKat

KitKat 4.4.4

I was racking my brain for days trying to figure out how to get a Nexus 7 tablet to display a Flash presentation I put together. I tried plugin after plugin to no avail and then I read that if I were to downgrade from Lollipop 5.0.2 to KitKat 4.4.4 the tablet would not only display flash files, but it would also have better support for video so I began the arduous process of […] Continue Reading…

Please Share with Your Peeps

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Create Green Screen Videos with After Effects

snoop-after-effects

I’ve been working with a lot of video lately and recently had a reason to play around with working with green screens. I have been mocking something up to test capabilities so I haven’t had the need to shoot my own green screen videos as of yet so this post is about the technical aspects not the actual shooting of video. Go here to pick from green screen videos on YouTube.

If you’re interested in […] Continue Reading…

Please Share with Your Peeps

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

How to Create a Realistic Sunrise with Flash CS6

Make a brilliant sun rise with Flash

Hello again blogosphere. I put together this quick little tutorial on how to create a realistic sun rise with Flash. It’s a neat little effect that’s not all that hard to do. This animation is 100% Flash. There is no imagery involved other than for color sampling.

Create Your Sun Movie

Step by step directions on creating your sun movie.

The first thing your going to want to do is create 2 layers.
The […] Continue Reading…

Please Share with Your Peeps

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Tips for Animating with Flash CS6

Flash

In my industry I’ve worn so many hats and learned so many programming languages and programs that I couldn’t even name them all. In 1999-2001 I was primarily a Flash programmer. Since the advent of HTML5 the use of Flash has steadily declined, however not where I am working now. I’m a conceptual interactive modeler. I create user interfaces for technology that doesn’t exist. I love what I do.

That being said I’ve found myself […] Continue Reading…

Please Share with Your Peeps

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Theme Inspired Headers

cropped-MADMEN.png

I posted some new logo ideas a little while back before I re-developed my web site due to being hacked by scumbags. At any rate, I created a rotating header that changes every time a page is reloaded.

Below is the current list of TV, movie and otherwise geek inspired headers from some of my favorite tv shows, movies and books. I seem to keep adding to the list so I’m sure there will […] Continue Reading…

Please Share with Your Peeps

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Adam Carolla’s Jacuzzi Enema Story- NSFW

Oldhafer-ACS

I’m a huge fan of Adam Carolla. I’ve listened to him since about 1998 when I lived in the Hollyhood Hills off of Cherokee & Hollywood Blvd. Through his Loveline days back on K-rock (when I lived in Rapebank) to his day time radio show and now to his podcast which is where this little excerpt comes from. It’s been told before and is even written about in his book Not Taco Bell Material. […] Continue Reading…

Please Share with Your Peeps

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
1 2 3 7