*This is a continuation off of nklf’s post
[Snippet] HTML 5 Video Player (with Flash fall back). All credits go to Grzegorz Widla AND nklf. *
*Sorry for double posting. - This thread is also available on the above post/topic but thought it could use its own topic to help with search engine results. *
Hi, thought I’d just bump this thread. Seems I came across a similar requirement as our church wanted its sermons viewable on most portable devices (mainly Apple products). Remember, Apple only supports HTML5 on their portable devices.
The problem was that not all browsers support the mp3 format (which is what ALL our sermons are encoded as), and not all browsers support OGG (while most are making the transition).
Take a look at this link for browser-codec compatibility:
http://html5doctor.com/native-audio-in-the-browser/
Suffice to say, we kept DewPlayer (flash-based player) on, and just left a link to the file which can be accessed via itunes/podcast.
All that said, first I’d like to thank nklsf for opening this topic and porting the VideoJS component over to MODX.
Lets begin. (Actually we’ve already begun, I’m just going to show you how I was able to get the audio player up and running. We’re going to springboard off of nklsf’s work but use AudioJS: a forked version of VideoJS.)
1.
Download all the AudioJS files off GitHub. (We really don’t need all of them but just get them just the same.)
2. Add this to the header of your template (we’ll need this to initialize AudioJS and style the player:
<link rel="stylesheet" type="text/css" href="path/to/audio-js.css" />
<script src="path/to/audio.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
// Run the script on page load.
// If using jQuery
// $(function(){
// AudioJS.setup();
// })
// If using Prototype
// document.observe("dom:loaded", function() {
// AudioJS.setup();
// });
// If not using a JS library
window.onload = function(){
AudioJS.setup();
}
</script>
3. Great we’re almost done. Now, create a new snippet. I named mine "html5audio" (without the "").
4. Now, copy the code originally posted by nklsf and rename all instances of "video" that are outside the php comments ( // ) to "audio". *Duh* lol..
5. Next, you will need to edit just a few bits of code. Remember, we’re changing the video to audio so that means supported formats as well. HTML5 <audio> only supports .WAV , .MP3 , .OGG . Most browsers support MP3 and OGG, in fact, these 2 go head to head - with OGG having a slight advantage - ITS FREE. More info about this on the web. After hours of researching, eventually we’ll start encoding as OGG.
So, onto the code to edit.
Change:
// VIDEO FORMATS
$mp4Code = '<source src="'. $mp4 .'" type="video/mp4">' . "\n";
$webmCode = '<source src="'. $webm .'" type="video/webm">' . "\n";
$oggCode = '<source src="'. $ogg .'" type="video/ogg">' . "\n";
To:
// AUDIO FORMATS
$mp3Code = '<source src="'. $mp3 .'" type="audio/mpeg">' . "\n";
$wavCode = '<source src="'. $wav .'" type="audio/wav">' . "\n";
$oggCode = '<source src="'. $ogg .'" type="audio/ogg">' . "\n";
$flashFLVCode = '<param name="flashvars" value=\'config={"clip":"'. $flv .'"}\' />' . "\n";
$flashMP3Code = '<param name="flashvars" value=\'config={"clip":"'. $mp3 .'"}\' />' . "\n";
$flashWAVCode = '<param name="flashvars" value=\'config={"clip":"'. $wav .'"}\' />' . "\n";
$flashOGGCode = '<param name="flashvars" value=\'config={"clip":"'. $ogg .'"}\' />' . "\n";
Ok, a few things. You’re probably asking why there’s "flash" there (ISN’T THIS FOR HTML 5!?) - well this is a flash fallback for browsers that do not support HTML5 AND browsers that do not support the necessary file formats. You don’t want to leave your viewers hanging if one doesn’t work and they don’t support a specific format.
Ok, back to the code:
Replace:
if (isset($mp4)) {
echo $mp4Code;
}
if (isset($webm)) {
echo $webmCode;
}
if (isset($ogg)) {
echo $oggCode;
}
With:
if (isset($mp3)) {
$output .= $mp3Code;
}
if (isset($wav)) {
$output .= $wavCode;
}
if (isset($ogg)) {
$output .= $oggCode;
}
Next, replace:
if (isset($mp4)) {
echo $flashMP4Code;
}
else {
echo $flashFLVCode;
}
with:
if (isset($mp3)) {
$output .= $flashMP3Code;
}
else {
$output .= $flashFLVCode;
}
And lastly, change:
if (isset($mp4)) {
echo '<a href="'. $mp4 .'">MP4</a> ' . "\n";
}
if (isset($webm)) {
echo '<a href="'. $webm .'">WebM</a> ' . "\n";
}
if (isset($ogg)) {
echo '<a href="'. $ogg .'">Ogg</a> ' . "\n";
}
if (isset($flv)) {
echo '<a href="'. $flv .'">Flv</a> ' . "\n";
}
To:
if (isset($mp3)) {
$output .= '<a href="'. $mp3 .'">MP3</a> ' . "\n";
}
if (isset($wav)) {
$output .= '<a href="'. $wav .'">WAV</a> ' . "\n";
}
if (isset($ogg)) {
$output .= '<a href="'. $ogg .'">Ogg</a> ' . "\n";
}
Below is a working HTML5AUDIO snippet:
<?php
// HTML5 Video Player Snippet originally created by Grzegorz 'dzes' Widła
// Based on Video JS OpenSource HTML 5 Video Player
// Changed to Revo-Compatible format by nklsf
// Version 0.91 August 2010
// For full player templating capabilities go here: http://videojs.com/
// Download package and apply css and javascript files responsible for styling.
// If you prefer to keep it simple just erase few lines of the snippet below line 63 (check comments there)
// Style div.wrap-audio for alignement of the player.
// Example usage:
// [[html5audio? &mp3=`fileurl.mp4` &image=`splash.png` &width=`640` &height=`360`]]
// Three file formats:
// mp3, wav, ogg
// Using mp3 your audio can be played on very most of devices/browsers.
// Suggested are both ogg and mp3 (for all browsers support)
// PARAMETERS:
// &mp3=`fileurl.mp3`
// &wav=`fileurl.wav`
// &ogg=`fileurl.ogg`
// &flv=`fileurl.flv`
// &width=`width of the audio in pixels`
// &height=`height of the audio in pixels`
// &image=`splash image url.extension`
$output = '';
// AUDIO FORMATS
$mp3Code = '<source src="'. $mp3 .'" type="audio/mpeg">' . "\n";
$wavCode = '<source src="'. $wav .'" type="audio/wav">' . "\n";
$oggCode = '<source src="'. $ogg .'" type="audio/ogg">' . "\n";
$flashFLVCode = '<param name="flashvars" value=\'config={"clip":"'. $flv .'"}\' />' . "\n";
$flashMP3Code = '<param name="flashvars" value=\'config={"clip":"'. $mp3 .'"}\' />' . "\n";
// PRINTED CODE
$output .= "\n" . '<div class="wrap-audio" style="width: '. $width .'px">';
$output .= "\n" . '<div class="audio-js-box">' . "\n";
$output .= '<audio class="audio-js" width="'. $width .'" height="'. $height .'" poster="'. $image .'" controls preload>' . "\n";
if (isset($mp3)) {
$output .= $mp3Code;
}
if (isset($wav)) {
$output .= $wavCode;
}
if (isset($ogg)) {
$output .= $oggCode;
}
$output .= "\n" . '<object width="'. $width .'" height="'. $height .'" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="false" />' . "\n";
if (isset($mp3)) {
$output .= $flashMP3Code;
}
else {
$output .= $flashFLVCode;
}
$output .= '<img src="'. $image .'" width="'. $width .'" height="'. $height .'" alt="Poster Image" title="No audio playback capabilities." />
</object>
</audio>' . "\n";
// GET RID OF THAT IF NOT USING VIDEO JS FOR STYLING
$output .= '<p class="vjs-no-audio"><strong>Download Audio:</strong>' ."\n";
if (isset($mp3)) {
$output .= '<a href="'. $mp3 .'">MP3</a> ' . "\n";
}
if (isset($wav)) {
$output .= '<a href="'. $wav .'">WAV</a> ' . "\n";
}
if (isset($ogg)) {
$output .= '<a href="'. $ogg .'">Ogg</a> ' . "\n";
}
$output .= '</p>' . "\n";
// DELETE TILL HERE
$output .= '</div>' . "\n";
$output .= '</div>' . "\n";
return $output;
To call this snippet, simply use either:
[[!html5audio? &mp3=`[[*SermonLocation]]`]] --->> With the assumption that you’ve created a Template Variable called "SermonLocation" (or a similar name). The TV value must contain the path/location of your mp3/ogg/wav file.
or
[[!html5audio? &mp3=`[[*content]]`]] ---->> If you’re using a static resource - where the value of [[*content]] is the path/location of your mp3/ogg/wav file.
Here’s a demo:
http://www.newlifethefort.com/index.php?id=261 <audio> can be heard/played in Safari 5 / Chrome 11 / IE9 (These are what I have installed on my computer)
NOTE: The Flash Fallback seems to only work for BROWSERS THAT DO NOT SUPPORT HTML5 <AUDIO>. You will have to include php code that will check your browser and determine which file format to use. OR output this php in such a way to create 3 instances of:
<source src="" type="audio/mpeg">
<source src="" type="audio/wav">
<source src="" type="audio/ogg">
You may also consider making 3 template variables: tvMP3, tvWAV, tvOGG so you get all your bases covered.
Hope this helps! The code is not 100% perfect or bug free. Hopefully with this discussion we can find out how to perfect it. In IE8, I don’t get player controls, and it automatically plays on page load. Anyway I believe this is a step in the right direction.
You are all blessed to be a blessing!
