VA4Most.WebReDesignMiami.com :: HTML5 Video & Audio :: W3C Validated Web 3.0 & iPad Ready

Web 3.0 Design VA4Most.js™ W3C Standards Compliant HTML5 Video
with
FlowPlayer
& Source Link Fallback


html5 video example:

Sample Video Media:
OGG + MP4 + FLV + PNG
Our thanks to Joachim de Posada, an
inspiring man, and to TED.com,
an enlightened group.
One Script to Serve Them All!™
 
VA4Most.js™ is the first combined open/proprietary, HTML5/Flash and Apple/Adobe web video/audio embedded media alternative to pass W3C standards compliance validation (HTML5/CSS3) and all seven tests of "Web 3.0 Readiness". This means that web pages serving up video or audio can leverage VA4Most.js to qualify as "iPad Ready" today with no changes needed when browsers like Internet Explorer 9 add native HTML5 video and audio support tomorrow. For web browsers that do not support HTML5 video and audio elements, VA4Most.js incorporates Adobe flash detection and jQuery to deliver reliable quality video and audio via the rich open source functionality of FlowPlayer and SoundManager2. A secondary source link fallback enables website visitors to download and experience MP4 (H.264/AAC), OGG (theora/vorbis), FLV (flash video) and other video plus MP3, OGG and WAV audio even if Javascript and Flash are disabled in their web browsers.
 
VA4Most.js is a freeware Unobtrusive Javascript utility that serves as an HTML5-enabling timesaver, template and tool for do-it-yourself webmasters as well as professional web developers. It can quickly be installed on almost any web server or hosting platform, easily be inserted into almost any web page, and reliably deliver all major video and audio formats to an estimated 98% or more of all major web browser clients. VA4Most.js is truly one script to serve them all!

VA4Most.js
Part 1: Web Video for "Most" of Us

VA4Most.js is not the first combined open/proprietary, HTML5/Flash and Apple/Adobe web video/audio embedded media alternative. It is, however, the first of its kind to pass all seven tests of "Web 3.0 Readiness". This means, among other things, that web pages serving up video or audio can leverage VA4Most.js to qualify as "iPad Ready" today with no changes needed when browsers like Internet Explorer 9 add native HTML5 <video> and <audio> support tomorrow.

Sample Video Media: OGG (theora/vorbis) + MP4 (H.264/AAC) + JPG (poster image)

"Most" of us--including those using Javascript-enabled web browsers that support either (a) HTML5 video (e.g. FireFox 3.5+ ) or (b) flash video embedded using <object> tags and elements (e.g. MSIE 6+)--should be seeing a video poster splash image and controls for an embedded video presentation immediately above this paragraph. This presentation began, by the way, as an advertising piece created in Swishzone flash (".swf") using mpTrim to edit the MP3 provided gratis by DanoSongs.com for background music. We then ran that shockwave file through Moyea SWF to create a flash video (".flv") that was uploaded to YouTube and Vimeo, then used as the source for the OGG (".ogv" renamed ".ogg") created with Firefogg and the MP4 (".m4v" renamed ".mp4") created with HandBrake, justifiably taking Mark Pilgrim's Dive into HTML5 as gospel regarding video codec H.264, audio codec AAC, OGG's theora/vorbis combo and Google's VP8.

"Most" of us who don't see the video embedded above should see as fallback an image like the following which they can click to download our video as an MPEG-4 (".mp4") file to view using QuickTime (or any of several other free MP4 players that hopefully didn't spam up their browser with Dealio Toolbar malware during installation). This should be viewable even in browsers with both Javascript and Flash disabled:

Click to download video!

Sample Video Source Link Fallback: MP4 option selected from [FLV|MP4|OGG|etc...]

But alas a very "few" of us--guesstimated as less than 2% of all web surfers--have seen nothing but text and perhaps a gray box. That is why we chose to name our solution "VA4Most" rather than "VA4All". For although we gratefully acknowledge picking up a concept here and snippet there from projects like Video For Everybody and Video For All, we suspect that the gifted guys behind them might readily affirm that the assertion in those titles was noble aspiration more so than "Mission Accomplished".

iPad

Overall, VA4Most.js is more about clean integration than innovation. For browsers that do not yet support HTML5 video and audio (including proper click-to-play video poster functionality), VA4Most.js incorporates Adobe Flash Detection and relies on the rich open source functionality of FlowPlayer and SoundManager2 ... whose developers like us (just exponentially and ingeniously more so) leverage jQuery ... which is a library of AJAX plugins and other routines written in Javascript ... an object-oriented programming language developed by Brendan Eich at Netscape and first released in 1995 as LiveScript. The rendered source generated by VA4Most.js can be viewed using Jennifer Madden's Firefox add-on View Source Chart.

Semantic Web Design VA4Most.js™ W3C Standards Compliant HTML5 Audio
with
SoundManager2
& Source Link Fallback


html5 audio example:

Sample Audio Media:
OGG + MP3
Play/Pause Toggle Link
Controls if Supported

VA4Most.js
Part 2: Web Audio for "Most" of Us

For those of you who may not be aficionados of French World War II pilot, writer and poet Antoine de Saint Exupèry, now you can at least know how to say his name:

Sample Audio Media: WAV + MP3 | Play/Pause Toggle Text Link | No Controls

What "most" of you should see immediately above this line is a text link to what may be the world's shortest French lesson. If your browser has native HTML5 audio support, VA4Most.js generated HTML for the <audio> tag and element to play the WAV file. If not, its fallback was to generate code for SoundManager2 to play the MP3. And failing that, what you might be looking at is a simple link to download the MP3 directly and play it with Windows Media Player or any one of several other local MP3 players (that hopefully were downloaded from reputable, malware-free sources).

Because WAV files can get big in a hurry, we chose the more efficient OGG format to share this blast from the celluloid biker past by Barbara Kelly & The Morning Good (where are they now?):

Sample Audio Media: OGG + MP3 | Play/Pause Toggle Text Link | No Controls

This WAV of sweet seduction is over 13MB ... but the OGG is less than 1MB ... and that makes a BIG difference when the browser is autobuffering the media. In fact, with the bandwidth saved we used VA4Most.js to link the same tune to a clickable image of the DVD cover for the latest flick to feature it. And if you view the source of our minimal template, you'll see that the methodology is the same that would be used for custom-designed audio "buttons".

For web browers with native support the HTML5 audio element provides an option for controls, and so does VA4Most.js for those browsers. If your browser has native HTML5 audio support, you can see a simple CSS-styled example of audio controls to the left of this paragraph. If not, you should at least see a link to another New Age tune from DanoSongs.com. The same track, in fact, that "most" of you can play using the MUSIC ON|OFF toggle in the upper right corner of our web pages.

HTML5/CSS3 Web Design VA4Most.js™ W3C Standards
Compliant HTML5
Video & Audio
with
Flash & Link
Fallback


html5 audio example:

Sample Audio Media:
OGG + MP3 + PNG
Play/Pause Toggle Image
No Controls

VA4Most.js
Part 3: Installation & Implementation

Installing the Software

VA4Most.js is an Unobtrusive Javascript freeware utility that serves as an HTML5-enabling timesaver, template and tool for do-it-yourself webmasters as well as professional web developers. It can be installed on any web server or web hosting account where its prerequisites jQuery, FlowPlayer and SoundManager2 (including their inlineplayer.js script) can be installed. That includes, as you might suspect, "most" web server platforms. Configuration requires making simple text changes to three lines at the bottom of "inlineplayer.js" and one line at the top of "va4most.js". Detailed installation instructions are provided in the "va4most_readme.txt" file included in our free software download. Follow those instructions carefully, and upon completion the <head> of your web pages should include a section something like this:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="flowplayer-3.1.4.min.js"></script>
<script type="text/javascript" src="soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript" src="inlineplayer.js"></script>
<script type="text/javascript" src="va4most.js" ></script>

Uploading Your Video Media

VA4Most.js supports serving video and audio media that has been placed on your web server or uploaded to your web hosting account. We recommend you begin this process by creating dedicated folders or subdirectories for this purpose, e.g. "html5_video" and "html5_audio", in your root document directory (e.g. "public_html"). Then for each video you plan to embed in your web pages, you need to upload a commonly-named set of files that include:

  • An OGG file with extension ".ogg" for the first video source.
  • An MP4 file with extension ".mp4" for the second video source, FlowPlayer and link fallback.
  • Optionally, an FLV file with extension ".flv" if FlowPlayer takes "too long" to download and begin playing your MP4. This is relevant only for browsers without native HTML5 video support. And alternatively, you can attempt to implement a FlowPlayer MP4 streaming solution.
  • A poster or splash image (".gif"|".jpg"|".png") with the same dimensions as the video.
  • A FlowPlayer external configuration file with extension ".js" you can create by copying and carefully editing this template:
/* START OF FLOWPLAYER EXTERNAL CONFIG FILE EXAMPLE */
{
  'playerId':'YourUniqueID',
  'playlist':[
    {'url':'html5_video/yourimage.jpg','autoPlay':true,'autoBuffering':false,'scaling':'scale'},
    {'url':'html5_video/yourvideo.mp4','autoPlay':false,'autoBuffering':false,'scaling':'scale'}
  ],
  'plugins': {
    'controls': {
      'fullscreen': false
    }
  }
}
/* END OF FLOWPLAYER EXTERNAL CONFIG FILE EXAMPLE */

Here is an example of a directory listing for one video file set:

04/20/2010  09:04 AM  0,075,971  Web_Design_Miami_Website_Designer.jpg
04/29/2010  11:39 AM  0,000,537  Web_Design_Miami_Website_Designer.js
04/20/2010  08:14 AM  9,767,547  Web_Design_Miami_Website_Designer.mp4
04/20/2010  07:53 AM  8,966,445  Web_Design_Miami_Website_Designer.ogg

Although VA4Most.js supports video formats other than OGG and MP4, the links above explain why we recommend that pairing in that order at this time. And so long as you have your video available in at least one common format, e.g. FLV, in those same links you'll find all you need to create the others. Note also that ".ogv" and ".m4v" media can often simply be renamed to create ".ogg" and ".mp4" files.

Uploading Your Audio Media

VA4Most.js supports serving audio and video media that has been placed on your web server or uploaded to your web hosting account. We recommend you begin this process by creating dedicated folders or subdirectories for this purpose, e.g. "html5_audio" and "html5_video", in your root document directory (e.g. "public_html"). Then for each audio you plan to embed in your web pages, you need to upload a commonly-named set of files that include:

  • An OGG file with extension ".ogg" or WAV file with extension ".wav" for the first audio source.
  • An MP3 file with extension ".mp3" for the second audio source, SoundManager2 and link fallback.
  • Optionally, a link anchor image (".gif"|".jpg"|".png").

Here is an example of a directory listing for one audio file set:

02/19/2010  11:36 AM  1,103,938  Marias_Theme.mp3
04/24/2010  03:42 PM  0,835,584  Marias_Theme.ogg
04/24/2010  02:27 AM  0,033,426  Marias_Theme.png

Although VA4Most.js supports formats other than OGG or WAV and MP3, the links above explain why we recommend those options in that order. And so long as you have your audio available in at least one common format, you can download tools like Leawu MP4 Convertor to create the others.

Embedding Your Video Media

For each video, modify your web page HTML/CSS source as follows:

  • Assign a unique ID for the video, e.g. "SevenSecrets".
  • Create a container <div> (ID optional) and use CSS to set width and height parameters.
  • Insert and set parameters to a VA4Most.js <script> line calling "html5video".

Here is a VIDEO example taken from our minimal template. All you need to modify or accept are the bolded parameter values. If multiple media are involved, an HTML code generation form could be set up or PHP scripting leveraged to automate the process:

<!-- BEG HTML5 VIDEO CODE SNIPPET -->
<!--
VA4Most.js :: html5video() :: parameters:
  var videoLinkId   	= vlink;	// Any unique ID "X" 
  var videoFileName 	= vfile;	// ***RELATIVE*** Path/Filename (no extension) of video source files 
  var videoFilePost 	= vpost;	// File extension of video poster/splash image (e.g. "jpg")
  var videoFileExt1 	= vtyp1;	// File extension of 1st listed video source file (e.g. "ogg")
  var videoFileExt2 	= vtyp2;	// File extension of 2nd listed video source file (e.g. "mp4")
  var videoFilePlay 	= vplay;	// File extension of FlowPlayer video source file (e.g. "mp4")
  var videoFileCnfg 	= vcnfg;	// File extension of FlowPlayer video config file (e.g. "js")
  var videoAutoPlay 	= vauto;	// Autoplay (true|false) for HTML5 video tag
  var videoAutoBuff 	= vbuff;	// Autobuffer (true|false) for HTML5 video tag
  var videoLoop     	= vloop;	// Loop (true|false) for HTML5 video tag
  var videoControls 	= vctrl;	// Controls (true|false) for HTML5 video tag
  var videoWidth    	= vwide;	// Width (pixels) for HTML5 video tag 
  var videoHeight   	= vhigh;	// Height (pixels) for HTML5 video tag
  var videoReturn	= vdest;	// Options: "write" or "return" HTML
-->
<div id="html5video">  
<script type="text/javascript">/* <![CDATA[ */
html5video("SevenSecrets",
"html5_video/Web_Design_Miami_Website_Designer",
"jpg","ogg","mp4","mp4","js","false","true","false","true","640","352");
/* ]]> */</script><noscript>
<p><a title="Click to download video!"
 href="html5_video/Web_Design_Miami_Website_Designer.mp4"><img 
 src="html5_video/Web_Design_Miami_Website_Designer.jpg"
 width="640" height="352" alt="Click to download video!"/></a></p></noscript></div>
<!-- END HTML5 VIDEO CODE SNIPPET -->
( Note to George: True|False parameter values are string, not Boolean. )

Embedding Your Audio Media

For each audio, modify your web page HTML/CSS source as follows:

  • Assign a unique ID for the audio, e.g. "Exupery".
  • Optionally, customize the <audio> controls appearance with CSS styling.
  • Insert and set parameters to a VA4Most.js <script> line calling "html5audio":

Here is an AUDIO example taken from our minimal template. All you need to modify or accept are the bolded parameter values. If multiple media are involved, an HTML code generation form could be set up or PHP scripting leveraged to automate the process:

<!-- BEG HTML5 AUDIO CODE SNIPPET -->
<!--
VA4Most.js :: html5audio() :: parameters:
  var audioLinkId   	= alink;	// Any unique ID "X" for which "Xtag" is available
  var audioFileName 	= afile;	// Path/Filename of audio source files 
  var audioFileExt1 	= atyp1;	// File extension of 1st listed audio source file (e.g. "wav")
  var audioFileExt2 	= atyp2;	// File extension of 2nd listed audio source file (e.g. "mp3")
  var audioFilePlay 	= aplay;	// File extension of fallback audio source file (e.g. "mp3")
  var audioFileText 	= atext;  	// Link anchor text (or UTF-8 character codes) or image tag with esc...
  var audioAutoPlay 	= aauto;	// Autoplay (true|false) for HTML5 audio tag
  var audioAutoBuff 	= abuff;	// Autobuffer (true|false) for HTML5 audio tag
  var audioLoop     	= aloop;	// Loop (true|false) for HTML5 audio tag
  var audioControls 	= actrl;	// Controls (true|false) for HTML5 audio tag 
  var audioReturn	= adest;	// Options: "write" or "return" HTML
-->
<div>
<script type="text/javascript">/* <![CDATA[ */
html5audio("Exupery","html5_audio/Antoine_de_Saint_Exupery",
"wav","mp3","mp3","Antoine de Saint Exupery","false","true","false","false");
/* ]]> */</script><noscript><p><a
 href="http://www.webredesignmiami.com/html5_audio/Antoine_de_Saint_Exupery.mp3">Antoine
 de Saint Exupery</a></p></noscript>
</div>
<!-- END HTML5 AUDIO CODE SNIPPET -->
( Note to George: True|False parameter values are string, not Boolean. )

W3C Validation, Browser Testing & Technical Support

Properly installed, VA4Most.js is W3C standards compliant and will validate for both HMTL5 and CSS3. So if your web pages validated cleanly before you made your changes, the first thing you should do after embedding your media is re-validate them and correct any errors. If your web pages did not validate in the first place, there are some questions you should be asking about your online visibility and market potential in a Web 3.0 world.

Thinking along those same lines, the next thing you should do is verify that your media embeds are functioning properly using the browser/codec combinations most likely to be used by your primary audience. If you read the information we have provided and follow the links and our recommendations, "most" of you will have "most" of the bases covered! If problems do arise, here are some questions to aid you in troubleshooting:

  1. Have you read everything relevant here and in the download?
  2. Is your web server (web hosting account) functioning properly?
  3. Does the web client (or do you) have a reliable Internet connection?
  4. Is the experience not what should be expected given the bandwidth and browser?
  5. Have you verified that your jQuery software is installed and working properly?
  6. Have you verified that your FlowPlayer software is installed and working properly?
  7. Have you verified that your SoundManager2 software is installed and working properly?
  8. Did you validate your web pages after installing VA4Most.js and all of your media embeds?
  9. Did you play and verify your media before and after transferring it to your web server?

If the answer to all of these questions is "Yes" and you are still experiencing issues, please contact us for further advice and technical support options...