Andrew David Joseph Hall

jQuery - Audio and Video

HTML5 Audio and Video Elements

Assume your video is called "video" and your audio is called "audio".

Your HTML5 markup would be:

   <video controls>
      <source src="video.mp4" type="video/mp4" >
      <source src="video.vorbis.ogv" type="video/ogg"; 
                     codecs="theora/vorbis" " >
     <!--  FALLBACK CODE HERE  -->
   </video>

   <audio controls>
     <source src="audio.mp3" type="audio/mpeg" > 
     <source src="audio.ogg" type="audio/ogg" >
     <!--  FALLBACK CODE HERE  -->
   </audio>

Audio and Video Conversion

You need your video in two formats - MP4 and OGV/Vorbis - and need your audio in two formats - MP3 or OGG

Different browsers support different audio and video formats. Flash will handle MP4 and MP3.

I use a couple of tools for format conversion

FALLBACK CODE HTML4 and Earlier

It is assumed that you wish to use MP4 and MP3 files in Flash, since you have them on hand for HTML5, so a generic "player.swf" is wrapped around the MP4 and MP3 files.

The fallback code uses an <embed> tag for the flash player within the <video> and <audio> tags to allow the browser use flash if HTML5 is not available.

Internet Explorer before IE9 requires an <object> which should be included within IE comments.

  • Video Code
    •    <embed type="application/x-shockwave-flash" src="player.swf"
      width="600" height="400" id="videoObject1" name="videoObject1"
      quality="high"
      flashvars="file=video.mp4">
      <!--[if !IE]>-->
      <object width="300" height="32" id="videoObject1"
            classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
         <param name="movie" value="player.swf"/>
         <param name="quality" value="high"/>
         <param name="flashvars" value="video.mp4"/>
         <a href="http://www.adobe.com/go/getflash">
            <img src="http://www.adobe.com/images/shared
                 /download_buttons/get_flash_player.gif"
                 alt="Get Adobe Flash player"/>
          </a>
      </object>
      <!--<![endif]-->
    </embed>
  • Audio Code
    •    <embed type="application/x-shockwave-flash" src="player.swf"
      width="300" height="32" id="audioObject1" name="audioObject1"
      quality="high"
      flashvars="file=audio.mp3">
      <!--[if !IE]>-->
      <object width="300" height="32" id="audioObject1"
            classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
         <param name="movie" value="player.swf"/>
         <param name="quality" value="high"/>
         <param name="flashvars" value="audio.mp3"/>
         <a href="http://www.adobe.com/go/getflash">
            <img src="http://www.adobe.com/images/shared
                 /download_buttons/get_flash_player.gif"
                 alt="Get Adobe Flash player"/>
         </a>
      </object>
      <!--<![endif]-->
   </embed>

If you want to use html markup...

Using HTML markup

  • Prepare your video files in both mp4 and ogv formats.
  • Prepare your audio files in both mp3 and ogg formats.
  • Download the html markup and the associated player.swf file
  • Place player.swf somewhere in you web-site
  • Copy the html markup from the downloaded html markup into your web-page.
    • Change references to "player.swf" in the HTML markup to reference its location.
    • Change "audio.mp3" and "video.mp4" to be references to your audio mp3 and your video mp4 files.
    • Change "audio.ogg" and "video.vorbis.ogv" to be references to your audio and video mp3 and mp4 files.
    • Alter "width" and "height" as you wish.
    • If you use more than one of either type in a single page: change the ids and names accordingly. (N.B. Two elements cannot have the same id.)

jQuery Code Simplification

My jQuery code and elements allow you to insert a span and an anchor element, for example...

    <span class="embedded-video">my video</span><a href="video.mp4">
    <span class="embedded-audio">my audio</span><a href="audio.mp3">

My jQuery code adds support for HTML5 or Flash for Internet Explorer and other browsers into the page.

To use my jQuery Code

Set up your video and audio.

  • Prepare your video files in both mp4 and ogv formats.
  • Prepare your audio files in both mp3 and ogg formats.
  • Make sure you store the MPEG version in the same location as the OGG version.

Download the components.

Add scripts to the header of the page.

  • A link to a jQuery library, for example, from Google:
    •    <script 
      src="https://ajax.googleapis.com
       /ajax/libs/jquery/1.7.0/jquery.min.js"> 
   </script>
  • A link to the media.js JavaScript
    •    <script src="root/adjhjquery/media/media.js" 
           type="text/javascript">
      </script>

Follow some simple guidelines.

  • Ensure that the media.js media.css, swfobject.js and preview.jpg files are in the same directory.
  • If you use a directory other than root:/adjhquery/media then edit the media.js file's "var thisFilesLocation = "http://"+location.host+"/adjhjquery/";" variable declaration accordingly and change the location of close.png.
  • Never separate media.js, swfobject.js and player.swf. They have to be in the same directory to work together.
  • If you wish to store these files in a directory on another domain you need to permission your web-site to use files from the other domain.
  • Make sure your video.ogv files are named as "video.theora.ogv" if you mp4 file is called "video.mp4". My jQuery code will strip the "mp4" off the file name passed in in the anchor element (of the <span><anchor> html pair) and add "theora.ogv" to point at the ogv file.
  • Make sure you store mp3 with their related ogg audio files (in the same location) and mp4 with their related theora.ogv files.
 
Comments to: andrew@managementscientist.co.uk.  
You are visiting my United Kingdom United States of America Canada site. Visit my United Kingdom United States of America Canada sites.