Peter Jouret writes:

When I embed an mp4 movie of 1280x800 quality i have todo the settings 1280x800 in order to be able to see the play button. When i set 720x400 i see the movie is not scaled and i also don't see my play button. Is there a work-around for this or a payed tool to make this work. I don't want to stream movies from youtube or vimeo. I want to add it local to the confluence page.

So I created a user macro that solves the problem on most browsers. The user macro uses the HTML5 <video> tag with a fallback to the flash based flow player for older browsers.

## Macro title: HTML5 Video

## Macro has a body: N

##

## Output: HTML

##

## Developed by: David Simpson

## 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

Updated code here:html5-video-user-macro.vm

Here's a video of it in action:
http://www.youtube.com/watch?v=33iA8akPny8

It's not perfect, but mainly works well in the browsers I've tested it out in.