Release Date:
11 Jul 2011
Third-Party Integration


This is a rough example on how I implemented html5 video. Adapt this utility to your needs, In this specific case I am using the videojs player Script.


  • 2011.07.11: Fixed a typo that prevented Flash fallback from loading the video file

Example Setup:

  • create a video section
  • create uploadfields for video files (mp4, webm, ogg, flv)
  • create an uploadfield named 'poster
  • create a selectbox for choosing the video player's skin. Name it 'skin' and set values to 'default, tube, vim, hu'
  • if you don't provide a specific flv file, flash player will try to play the given mp4 file

in our xsl do something like:

    <xsl:call-template name="videojs">
        <xsl:with-param name="videoWidth" select="'778'" />
        <xsl:with-param name="videoHeight" select="'438'" />
        <xsl:with-param name="source" select="." />
        <xsl:with-param name="showDownloadLink" select="true()" />

where param source ('.') should point to your 'video/entry' xpath

(example for backend view, using Nick Dunns HTML panel field extension)


View Raw
<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet xmlns:xsl="" version="1.0">

	<xsl:template name="videojs">
		<xsl:param name="videoWidth"/>
		<xsl:param name="videoHeight"/>
		<xsl:param name="posterSource"/>		

		<xsl:param name="showDownloadLink" select="true()"/>
		<xsl:param name="source"/>
		<xsl:variable name="poster">
			<xsl:if test="$source/poster">
				<xsl:value-of select="concat($workspace,$source/poster/@path,'/',$source/poster/filename)"/> 
		<xsl:variable name="mp4">
			<xsl:if test="$source/mp4">
				<xsl:value-of select="concat($workspace,$source/mp4/@path,'/',$source/mp4/filename)"/> 
		<xsl:variable name="webm">
			<xsl:if test="$source/webm">
				<xsl:value-of select="concat($workspace,$source/webm/@path,'/',$source/webm/filename)"/> 
		<xsl:variable name="ogg">
			<xsl:if test="$source/ogg">
				<xsl:value-of select="concat($workspace,$source/ogg/@path,'/',$source/ogg/filename)"/> 
		<xsl:variable name="flv">
			<xsl:if test="$source/flv">
				<xsl:value-of select="concat($workspace,$source/flv/@path,'/',$source/flv/filename)"/> 
			<xsl:attribute name="class">
				<xsl:value-of select="'video-js-box'"/>
				<xsl:if test="$source/skin">
					<xsl:value-of select="concat(' ',$source/skin,'-css')"/>
		<!-- Using the Video for Everybody Embed Code -->
			<video class="video-js" width="{$videoWidth}" height="{$videoHeight}" controls="" preload="" poster="{$poster}" >
				<xsl:if test="$source/mp4">
					<source src="{$mp4}" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
				<xsl:if test="$source/webm">
					<source src="{$webm}" type='video/webm; codecs="vp8, vorbis"' />
				<xsl:if test="$source/ogg">
					<source src="{$ogg}" type='video/ogg; codecs="theora, vorbis"' />
				<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
				<xsl:if test="$source/flv or $source/mp4">
					<xsl:variable name="flashvideo">
							<xsl:when test="$source/flv">
								<xsl:value-of select="$flv"/>
								<xsl:value-of select="$mp4"/>
					<object class="vjs-flash-fallback" width="{$videoWidth}" height="{$videoHeight}" type="application/x-shockwave-flash"
						<param name="movie" value="" />
						<param name="allowfullscreen" value="true" />
						<xsl:variable name="flashvars"><![CDATA[config={"playlist":["]]><xsl:value-of select="$poster" /><![CDATA[", {"url": "]]><xsl:value-of select="$flashvideo" /><![CDATA[","autoPlay":false,"autoBuffering":true}]}]]></xsl:variable>

						<param name="flashvars" value='{$flashvars}' />
					<!-- Image Fallback. Typically the same as the poster image. -->
						<img src="" width="{$videoWidth}" height="{$videoHeight}" alt="Poster Image"
						title="No video playback capabilities." />
		    <!-- Download links provided for devices that can't play video in the browser. -->
			<xsl:if test="$showDownloadLink = true()" >
				<xsl:if test="$source/mp4 or $source/webm or $source/ogg">				
					<p class="vjs-no-video"><strong>Download Video:</strong>
						<xsl:if test="$source/mp4">
							<a href="{$workspace}/{$source/mp4/@path}/{$source/mp4/filename}">MP4 <xsl:value-of select="concat('(',$source/mp4/@size,')')"/></a>,
						<xsl:if test="$source/webm">						
							<a href="{$workspace}/{$source/webm/@path}/{$source/webm/filename}">WebM <xsl:value-of select="concat('(',$source/webm/@size,')')"/></a>,
						<xsl:if test="$source/ogg">					
							<a href="{$workspace}/{$source/ogg/@path}/{$source/ogg/filename}">Ogg <xsl:value-of select="concat('(',$source/ogg/@size,')')"/></a><br/>
						<!-- Support VideoJS by keeping this link. -->
						<a href="">HTML5 Video Player</a> by VideoJS

Discuss this XSLT Utility

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details