VA4Most.js™ W3C Standards Compliant HTML5 Video
html5 video example:
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.
"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:
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".
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.
VA4Most.js™ W3C Standards Compliant HTML5 Audio
html5 audio example:
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:
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?):
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.
VA4Most.js™ W3C Standards
html5 audio example:
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>
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:
/* 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.
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:
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.
For each video, modify your web page HTML/CSS source as follows:
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 -->
For each audio, modify your web page HTML/CSS source as follows:
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 -->
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:
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...
