Create a gist now

Instantly share code, notes, and snippets.

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.

Show comment Hide comment
@l1x

l1x 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)

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.

Show comment Hide comment
@jentscke

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

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.

Show comment Hide comment
@muggenhor

muggenhor Nov 19, 2014

A usage example is available on youtube.

A usage example is available on youtube.

@KurtMar

This comment has been minimized.

Show comment Hide comment
@KurtMar

KurtMar 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.

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.

Show comment Hide comment
@jrutkovskis

jrutkovskis 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?

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.

Show comment Hide comment
@ksimons

ksimons Jan 9, 2015

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

ksimons commented Jan 9, 2015

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

@Digisplicer

This comment has been minimized.

Show comment Hide comment
@Digisplicer

Digisplicer 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?

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.

Show comment Hide comment
@nicocasel

nicocasel May 10, 2016

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

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.

Show comment Hide comment
@vidyapatil123

vidyapatil123 Mar 1, 2017

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

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

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