HTML5 Video Tag with Multi Browser Support + Flash Fallback
Posted: Sat Jan 22, 2011 4:10 pm
I run a couple of websites where I regularily need to include some videos. In the past I used solely the JW Flash Player which worked fine for most browsers except for those without Flash support (e.g. iPad). I had found (or wrote myself - I honestly cannot remember) a small tag (plugin) which created that <object> code.
With the introduction of the video tag in HTML5 and many friends acquiring iPads I did some reading on this topic and wrote below {video} tag which allows the integration of videos on pages or news articles. In order to include it you just need to create a new file function.video.php with below code in the plugins folder of your installation.
I think the code speaks for itself but maybe a few comments for the not so obvious stuff. First the "bgrd_class" allows to set a background that is in line with the website design. Just look at the top video at http://www.broadwayconnection.at/ The javascript code overcomes two problems: the video tag has no default mute parameter and iPad ignores the autoplay parameter. Any further questions just post in the forum.
With the introduction of the video tag in HTML5 and many friends acquiring iPads I did some reading on this topic and wrote below {video} tag which allows the integration of videos on pages or news articles. In order to include it you just need to create a new file function.video.php with below code in the plugins folder of your installation.
I think the code speaks for itself but maybe a few comments for the not so obvious stuff. First the "bgrd_class" allows to set a background that is in line with the website design. Just look at the top video at http://www.broadwayconnection.at/ The javascript code overcomes two problems: the video tag has no default mute parameter and iPad ignores the autoplay parameter. Any further questions just post in the forum.
Code: Select all
<?php
function smarty_cms_function_video($params, &$smarty)
{
global $gCms;
#path to Flash player
$flashPlayer = '/tools/player.swf';
#mp4 is mandatory for fallback reasons
if (!isset($params['mp4'])) exit;
#set movie paths
$mp4 = isset($params['mp4']) ? $params['mp4'] : '';
$ogg = (isset($params['ogg'])&&$params['ogg']<>'') ? "<source src='".$params['ogg']."' type='video/ogg'>\n" : '';
$webm = (isset($params['webm'])&&$params['webm']<>'') ? "<source src='".$params['webm']."' type='video/webm'>\n" : '';
#identify if iPad browser
$iPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
#set image for all browsers but iPad
$image = isset($params['image']) ? $params['image'] : '';
$poster = $iPad ? '' : " poster='".$image."' ";
#set autoplay for all browsers
$start = (isset($params['start'])&&$params['start']=='true') ? '&autostart=true' : '';
$start5 = (isset($params['start'])&&$params['start']=='true') ? "autoplay='autoplay' " : '';
$startPad = (isset($params['start'])&&$params['start']=='true') ? "pElement.load();\npElement.play();\n" : '';
#set mute for all browsers
$mute = (isset($params['mute'])&&$params['mute']=='true') ? '&mute=true' : '';
$mute5 = (isset($params['mute'])&&$params['mute']=='true') ? "pElement.muted=true;\n" : '';
#set custom object parameters or set default values
$height = isset($params['height']) ? $params['height'] : '348';
$width = isset($params['width']) ? $params['width'] : '438';
$objId = isset($params['id']) ? $params['id'] : 'video1';
$bgrdClass = isset($params['bgrd']) ? $params['bgrd'] : '';
#set additional Flash variables
$flashvars = isset($params['flashvars']) ? $params['flashvars'] : '';
$flashvars = $flashvars.$mute;
$stream = (isset($params['stream'])&&$params['stream']=='true') ? '&streamer=/uploads/videos/xmoov.php' : '';
#create html5 video tag
$video ="<video id='".$objId."'".$poster." width='".$width."' height='".$height."' controls='controls' ".$start5.">\n";
$video .="<source src='".$mp4."' type='video/mp4'>\n";
$video .=$webm.$ogg;
#create html code with Flash fallback (with optional standard background)
if ($bgrdClass<>'') {
$text = "<div class='".$bgrdClass."'>\n";
$text .= "<div style='color: white; margin: 0 0 0 73px;'>\n";
$text .= $video;
$text .= "<object id='obj_".$objId."' type='application/x-shockwave-flash' data='".$flashPlayer."' style='height: 350px; width: 586px;'>\n";
} else {
$text = "<div>\n".$video;
$text .= "<object id='o".$objId."' type='application/x-shockwave-flash' data='".$flashPlayer."' height='".$height."' width='".$width."'>\n";
}
#set Flash parameters
$text .="<param name='movie' value='".$flashPlayer."' ></param>\n";
$text .="<param name='allowScriptAccess' value='always'></param>\n";
$text .="<param name='allowFullScreen' value='true'></param>\n";
$text .="<param name='quality' value='high'></param>\n";
$text .="<param name='wmode' value='transparent'></param>\n";
$text .="<param name='FlashVars' value='file=".$mp4.$stream.$start.$flashvars."&image=".$image."&skin=/tools/stylish.swf&plugins=gapro-1&gapro.accountid=your_google_id'></param>\n";
#message in case neither video tag nor Flash player worked
$text .="Weder VIDEO Tag noch Flash Player wurden erkannt. Es ist Zeit Ihren Browser zu erneuern.<br />";
$text .="Hier können Sie die <a href='".$mp4."'>mp4-Version</a> downloaden.<br />";
$text .="<br />\n<img src='".$image."' alt='".$objId."' />\n";
$text .="</object></video>\n";
#javascript code for html5 mute or iPad autostart
if ($iPad or $mute5<>'') {
$text .="<__script__ type='text/javascript'>\n";
$text .="window.onload = function() {\n";
$text .="var pElement = document.getElementById('".$objId."');\n";
$text .=$mute5;
if ($iPad) $text .= $startPad;
$text .="};\n</script>\n";
}
#finish enclosing DIV and return full code
$text .="</div>\n";
if ($bgrdClass<>'') $text .= "</div>\n";
return $text;
}
function smarty_cms_help_function_video()
{
?>
<h3>What does this do?</h3>
<p>Creates a <code>video</code> tag which can be played by modern browswers. It contains a flash player as fallback in case of older browsers or not supported video type.</p>
<h3>How do I use it?</h3>
<p>Just insert the tag into your template/page like: <code>{video id="video1" mp4="/path/to/movie.mp4" ogg="/path/to/movie.ogg" webm="/path/to/movie.webm" image="/path/to/image.jpg"}</code></p>
<h3>What parameters does it take?</h3>
<ul>
<li><em>(required)</em> <tt>mp4</tt> - Filename and full path of mp4 video. Played by Safari (incl. iPad), IE9+ and fallback Flash player.</li>
<li><em>(recommended)</em> <tt>ogg</tt> - Filename and full path of ogg video. Played by Firefox, Chrome and Opera.</li>
<li><em>(recommended)</em> <tt>webm</tt> - Filename and full path of webm video. Played by Chrome, Opera and Firefox 4+.</li>
<li><em>(recommended)</em> <tt>image</tt> - Filename and full path of placeholder image.</li>
<li><em>(recommended)</em> <tt>height</tt> - Height of player/movie.</li>
<li><em>(recommended)</em> <tt>width</tt> - Width of player/movie.</li>
<li><em>(recommended)</em> <tt>id</tt> - The object id, needed for proper XHTML when using tag more than once.</li>
<li><em>(optional)</em> <tt>start</tt> - Set to 'true' to autostart movie.</li>
<li><em>(optional)</em> <tt>mute</tt> - Set to 'true' to mute movie.</li>
<li><em>(optional)</em> <tt>stream</tt> - Set to 'true' to enable Flash http-streaming.</li>
<li><em>(optional)</em> <tt>flashvars</tt> - Set any other player variables (start with '&').</li>
<li><em>(optional)</em> <tt>bgrd</tt> - Set class for enclosing DIV,e.g. for background image.</li>
</ul>
<p>Assumes Flash player installed at '/tools/player.swf'. The player can be downloaded from <a href="http://www.longtailvideo.com/">http://www.longtailvideo.com/</a></p>
<?php
}
function smarty_cms_about_function_video()
{
?>
<p>Author: GSM</p>
<p>Version: 1.0</p>
<p>Change History:<br/>
0.1 - Initial release with basic Flash player<br/>
0.5 - Flash player with mute, autoplay and streaming options<br/>
0.8 - HTML5 compatible <code>video</code> tag implementation with Flash fallback<br/>
0.9 - Support for iPad added<br/>
1.0 - Code clean up<br/>
</p>
<?php
}
?>
))