• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Amethyst Website Design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

Older

Simple HTML5 Video

February 16, 2010 Updated on February 16, 2010 Marcy Diaz

Share this post:

TwitterFacebookLinkedInEmail

Safari, Firefox, and Chrome now support HTML5 video; Opera support is coming soon.  Since the iPhone does not support Flash (and there are more users every day, especially with the iPad coming), it’s time to begin the transition.  I was interested in a solution that supplemented or enhanced the Flash video using JWPlayer that I have been using for several years.  Here is a demo of simple HTML5 video.

There are a number of methods for using HTML5 and Flash together:

  • html5 video fallbacks with markup
  • Video for Everybody! This also includes an example for editing the .htaccess file in the footer of the post.
  • Video Tag Embed With Fallbacks
  • Video on the Web
  • Using the HTML5 <video> tag with a Flash fallback
  • Fallback options for HTML5 video
  • Introduction to HTML5 video

Currently I prefer a simple version of Video for Everybody! and Video Tag Embed with Fallbacks.  I’m using H.264 mp4 video for Safari, iPhone, and Chrome, Ogg -Theora-Vorbis for Firefox and Opera, a flash player to play the H.264 mp4 for all IE and older browsers, and also providing the videos for download.  This is needed by the iPhone, depending on the video.

To get started with HTML5 on your server, you first need to add the correct mime types to the hidden .htaccess file on your hosting server.  Croc Camen has a wonderful example that also includes embedded fonts, as mentioned above. As a minimum, add this code:

AddType video/ogg .ogv
AddType video/ogg .ogg
AddType audio/ogg .oga
AddType video/mp4 .mp4

Then you need to convert your video into both Ogg and and H.264 mp4. formats and use them with the following code. More is coming on this.

This is the simple HTML5 video code:

<div id="videoarea" class="shadow">
     <video width="320" height="240" poster="Videos/cat.jpg" controls>
          <source src="Videos/cat.ogv" type="video/ogg" />
          <source src="Videos/cat.mp4" type="video/mp4" />
          <object width="320" height="240" type="application/x-shockwave-flash" data="player.swf">
            <param name="movie" value="player.swf" />
            <param name="allowFullScreen" value="true" />
            <param name="allowscriptaccess" value="always" />
            <param name="flashvars" value="file=Videos/cat.mp4&amp;image=Videos/cat.jpg&amp;controlbar=over" />
            <img src="Videos/cat.jpg" width="320" height="240" alt="HTML5 Video Demo" />
          </object>
     </video>
</div>
<p class="center">
     <a href="Videos/cat.mp4">Download MP4 Video</a> | <a href="Videos/cat.ogv">Download OGG Video</a>
</p>

Share this post:

TwitterFacebookLinkedInEmail

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!

Contact Marcy »

___

Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

 

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design
PO Box 94782
Phoenix AZ 85070

Phone: 602.759.0501
Email:

Contact Form
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2021   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework

This site uses cookies for the best browsing experience. By continuing to use this site, you accept our Cookie Policy »OK, got it!