Instantly share code, notes, and snippets.

Embed
What would you like to do?
HTML 5 Video user macro for Confluence
## Macro title: HTML5 Video
## Macro has a body: N
##
## Output: HTML
##
## Developed by: David Simpson <david@davidsimpson.me>
## 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
@l1x

This comment has been minimized.

l1x commented Oct 8, 2013

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

@jentscke

This comment has been minimized.

jentscke commented Sep 11, 2014

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 ;)).

@muggenhor

This comment has been minimized.

muggenhor commented Nov 19, 2014

A usage example is available on youtube.

@KurtMar

This comment has been minimized.

KurtMar commented Nov 30, 2014

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.

@jrutkovskis

This comment has been minimized.

jrutkovskis commented Dec 8, 2014

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?

@ksimons

This comment has been minimized.

ksimons commented Jan 9, 2015

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

@Digisplicer

This comment has been minimized.

Digisplicer commented Apr 29, 2015

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?

@nicocasel

This comment has been minimized.

nicocasel commented May 10, 2016

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

@vidyapatil123

This comment has been minimized.

vidyapatil123 commented Mar 1, 2017

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

@Judgepred

This comment has been minimized.

Judgepred commented Oct 12, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment