## 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 |
This comment has been minimized.
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 ;)). |
This comment has been minimized.
This comment has been minimized.
muggenhor
commented
Nov 19, 2014
A usage example is available on youtube. |
This comment has been minimized.
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. |
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
ksimons
commented
Jan 9, 2015
@jrutkovskis setting preload="none" on the video element should prevent them from prebuffering. |
This comment has been minimized.
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? |
This comment has been minimized.
This comment has been minimized.
nicocasel
commented
May 10, 2016
•
This comment has been minimized.
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? |
This comment has been minimized.
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. |
This comment has been minimized.
l1x commentedOct 8, 2013
David, do you know how could use a video from a different server? (src=http://some.other.server.com/nice_video.mov)