Author:
iwyg
Version:
1.1
Release Date:
11 Jul 2011
Category:
Third-Party Integration

Description

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.

changelog:

  • 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()" />
    </xsl:call-template>

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

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

XSLT

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

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 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:if>				
		</xsl:variable>
		<xsl:variable name="mp4">
			<xsl:if test="$source/mp4">
				<xsl:value-of select="concat($workspace,$source/mp4/@path,'/',$source/mp4/filename)"/> 
			</xsl:if>
		</xsl:variable>
		<xsl:variable name="webm">
			<xsl:if test="$source/webm">
				<xsl:value-of select="concat($workspace,$source/webm/@path,'/',$source/webm/filename)"/> 
			</xsl:if>	
		</xsl:variable>
		<xsl:variable name="ogg">
			<xsl:if test="$source/ogg">
				<xsl:value-of select="concat($workspace,$source/ogg/@path,'/',$source/ogg/filename)"/> 
			</xsl:if>
		</xsl:variable>			
		<xsl:variable name="flv">
			<xsl:if test="$source/flv">
				<xsl:value-of select="concat($workspace,$source/flv/@path,'/',$source/flv/filename)"/> 
			</xsl:if>
		</xsl:variable>
		
		
		<div>
			<xsl:attribute name="class">
				<xsl:value-of select="'video-js-box'"/>
				<xsl:if test="$source/skin">
					<xsl:value-of select="concat(' ',$source/skin,'-css')"/>
				</xsl:if>
			</xsl:attribute>
		<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
			<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>
				<xsl:if test="$source/webm">
					<source src="{$webm}" type='video/webm; codecs="vp8, vorbis"' />
				</xsl:if>
				<xsl:if test="$source/ogg">
					<source src="{$ogg}" type='video/ogg; codecs="theora, vorbis"' />
				</xsl:if>
				<!-- 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:choose>
							<xsl:when test="$source/flv">
								<xsl:value-of select="$flv"/>
							</xsl:when>
							<xsl:otherwise>
								<xsl:value-of select="$mp4"/>
							</xsl:otherwise>
						</xsl:choose>
					</xsl:variable>
					<object class="vjs-flash-fallback" width="{$videoWidth}" height="{$videoHeight}" 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="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="http://video-js.zencoder.com/oceans-clip.png" width="{$videoWidth}" height="{$videoHeight}" alt="Poster Image"
						title="No video playback capabilities." />
					</object>
				</xsl:if>
			</video>
		    <!-- 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>		
						<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>	
						<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/>
						</xsl:if>	
						<!-- Support VideoJS by keeping this link. -->
						<a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
					</p>
				</xsl:if>	
			</xsl:if>
		</div>
  </xsl:template>
</xsl:stylesheet>

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