Skip to content

Instantly share code, notes, and snippets.

@rushfrisby
Forked from dvdsmpsn/html5-video-user-macro.vm
Last active August 29, 2015 14:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rushfrisby/fa8cf7054ef211a27445 to your computer and use it in GitHub Desktop.
Save rushfrisby/fa8cf7054ef211a27445 to your computer and use it in GitHub Desktop.
## 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment