HTML 5 Video user macro for Confluence

html5-video-user-macro.vm

## Macro title: HTML5 Video
## Macro has a body: N
##
## Output: HTML
##
## Developed by: David Simpson <[email protected]>
## Date created: dd/mm/yyyy
## Installed by: My Name
##
## @param width:title=Width|type=string|required=false|desc=Video width
## @param height:title=Height|type=string|required=false|desc=Video height
## @param poster:title=Poster|type=string|required=false|desc=Set a placeholder image
## @param src:title=Source|type=string|required=true|desc=Attached video filename
##
## Tested on Google Chrome and Safari using mp4 files
## Does not work for mp4s on Firefox as Mozilla does not support mp4 files - lame
## Fail-back to Flash/Flow Player for old browsers -- Tested on Internet Explorer 8
##
## Usage: {html5video:src=myvideo.mp4|width=600|height=400}

#set ($attachment = $content.getAttachmentNamed($paramsrc)) 

<video controls="controls" 
	#if ($paramwidth)  width="$paramwidth"   #end
	#if ($paramheight) height="$paramheight" #end
	#if ($paramposter) poster="$paramposter" #end ## Set a placeholder image for the video
	>
	<source type="video/$attachment.getFileExtension()" src="$attachment.getDownloadPath()" />
	<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"
		#if ($paramwidth)  width="$paramwidth"   #else width="640"  #end
		#if ($paramheight) height="$paramheight" #else height="360" #end
		>
		<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
		<param name="allowFullScreen" value="true" />
		<param name="wmode" value="transparent" />
		<param name="flashVars" value="config={'playlist':[{'url':'$generalUtil.urlEncode("$action.getGlobalSettings().getBaseUrl()${attachment.getDownloadPath()}")','autoPlay':false}]}" />
		<span title="No video playback capabilities, please download the video below"></span>
	</object>
</video>
<p>
	<strong>Download video:</strong> <a href="$attachment.getDownloadPath()">$attachment.getFileExtension() format</a>
</p>

<script>
	## Remove the Firefox lameness and revert to the Flow Player embed
	if (jQuery.browser.mozilla) jQuery('source[type="video/mp4"]').unwrap();
</script>

## Big props to: http://sandbox.thewikies.com/vfe-generator/ 
## In response to: https://answers.atlassian.com/questions/171822/embedding-mp4-movie-screen-size

David, do you know how could use a video from a different server? (src=http://some.other.server.com/nice_video.mov)

Firefox supports mp4 files now (think since version 21). Tested in Firefox 32. Just remove line 44-47 to prevent page crash in Confluence (also remove line 16 ;)).

A usage example is available on youtube.

This assumes that you are hosting Confluence at the root of the host. If you host it for instance at /confluence/ then you must add $action.getGlobalSettings().getBaseUrl() to the src of the video and the download link making it "$action.getGlobalSettings().getBaseUrl()$attachment.getDownloadPath()".

I suggest you include this modification to the macro.

Very nice macro and it works fine except for when there are more than 10-12 videos.
The issue is, either player itself or Macro automatically attempts to buffer all videos on the page and browsers just can't handle it. Is there an option how to buffer only video that I press Play button on?

@jrutkovskis setting preload="none" on the video element should prevent them from prebuffering.

I have zero experience writing macros... is it possible to give the macro user the ability to chose whether or not a .webm video autoplays, loops, and starts muted? I know those can be setup in the video tag but can they be broken out into toggleable switches or checkboxes within the macro itself?

Thanks @jentscke and @KurtMar for your useful comments.
What @KurtMar suggests concern lines 27 and 40.

Tried on Chrome. And works as expected. But the video is not getting displayed on IE. Is it compatible for IE?

The HTML5 Video macro does not properly sanitize the 'width' and 'height' parameters so that arbitrary JavaScript can be injected into the site.