HTML5 Video Tag with Multi Browser Support + Flash Fallback

[GSM]

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.

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&ouml;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 '&amp;').</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
}

?>

[pixelita]

Wow. Sweet. I am going to try this out on a client's site -- they want a video on each new page. Thanks so much for this! ))

[map_1961]

Hi.

I tried with the help of AVPLAYER module creator Martin Woods to make this module work with HTML5 / JWPlayer.

If you have to manage more videos on a site its necessary to use a module. But some problems occurred that are described in here:
http://forum.cmsmadesimple.org/viewtopi ... eo#p237632

Maybe someone has an idea how to use the code given above with AVPLAYER module.

map_1961

[GSM]

What would be needed in the back-end is to allow 1:n relation between a video and the different encoded files, I don't know whether this is possible with the AV player module.

If that is possible you would just need to add the source for each coding (mp4, ogg, webm) into the template. I am not sure how to tackle all the browser specifc entries when it comes down to muting or autoplaying, or the poster issue with iPads.

For me this more manual approach via a tag was good enough, as the videos are just an add-on to the page content and not their main purpose.

[map_1961]

Thankx 4 reply. Will come back to u and show u the avplayer approach in a cmsms installation

Yours

map_1961

[schoutrub]

Hi all,

I've got a website where I'd like to show video's too. Now I use embedded Youtube to show video's, I've tried the approach shown here, but I don't seem to get it working.
First of all, with Google Chrome every option I've tried worked great. But, on IE9 en FF4 it doesn't work.
When I check out the sourcecode at www.broadwayconnection.at, I can't find any relevant differences. The only differences are the Google Analytics parameter, which I don't use and the Javascript to mute the the video, which I also don't use. Also the
Anyone can help with this one? My site is www.kabrio.nl, the testpage for this video is www.kabrio.nl/index.php?page=test . The CMSMS version is use is 1.9.4.1 "Faanui" .

Thanks in advance.

[GSM]

The html code looks fine of first glance but the media files are not served correctly. You might need to add the following lines to your .htaccess file:

Code: Select all

AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4
AddType video/x-m4v .m4v
AddType video/webm .webm

[schoutrub]

Thanks for the reply, but unfortunately the server is not apache, but abyss webserver
Nowhere I can find how to handle this within Abyss... Have you got an idea, or should I be searching that elsewhere?

[GSM]

I use pseudo streaming for my sites. See details to that subject here: http://www.longtailvideo.com/support/jw ... -streaming