Embedded mp4 does not work in any browser

[Mark]

I'm trying to setup a page in Confluence to host a series of company-internal videos (not allowed on YouTube/Vimeo - unlisted or otherwise).

I've tried the multimedia macro, selected the .mp4 attached to the page etc. When I save the page, depending on the browser, different things happen however none of the behavior is desirable.

• Chrome (on Windows): 'QuickTime Plug-in 7.7.4 has crashed' is shown and jigsaw piece crash icon is shown.
• Firefox (on Windows): Video is shown but no video controls are available to start/stop/pause the video - just a big picture of the start of the video. Clicking on the video doesn't do anything.
• IE10 (on Windows): Video is shown but no video controls are available to start/stop/pause the video - just a big picture of the start of the video. Clicking on the video doesn't do anything.

I've tested with .avi and .wmv across the browsers too. They are comparatively (to .mp4) massive in file size and don't behave as required either. The .avi auto plays in IE 10 without showing the video window (just the controls) and you cannot stop the video or pause it so the controls, though shown, don't work. The most success (if you can call it that) was the .wmv would wait to play in IE10 but you couldn't stop/pause the video - only the play button worked.

All-in-all not much luck :o(. I want to keep the video file size as small as possible so .mp4 is preferred, and the page will be viewed by users running either just Windows, or just Mac OS X, or just Linux - so the solution has to be platform-neutral - so IE is out.

I'm just starting out, so it could be that I'm missing something - I'm a user trying to do something, not the admin. I asked our IT team and they suggested I post here. They did tell me the current version is 5.1.5. and an upgrade to 5.4.3 is planned in a few months. The code in the page is currently:

<p>Media embed testing.</p>
<p>
  <ac:macro ac:name="multimedia">
    <ac:parameter ac:name="height">450</ac:parameter>
    <ac:parameter ac:name="width">800</ac:parameter>
    <ac:parameter ac:name="name">testvideo.mp4</ac:parameter>
  </ac:macro>
</p>
<p> </p>
<p> </p>

[Matthew J. Horn · Accepted solution]

An alternative is to use the HTML plugin and embed your code in that. I've done this with the Flash HTML wrapper and streamed videos via Flash.

Another approach is to put the videos on a video-sharing site like Vimeo or YouTube, and embed their code in the HTML macro.

[Davin Studer]

Update:
changed .js and .css link to go to a cdn

I created a user macro for our organization that got around this for us. I'll put the code below. Basically I used mediaelement js for it. You'll have to make one change and that is to point it at a local copy of mediaelementjs ... I couldn't find a CDN for it. Just replace the parts that say ##yourserverhere## with your locally hosted copy.

Macro Name:
media element

Macro Title:
MediaElement

Categories:
Media

Macro Body Processing:
No macro body

Template:

## Developed by: Davin Studer
## Date created: 06/26/2013
## This macro will allow you to embed an external video or audio file into a wiki page.
## @paramSource:title=Media Source URL|type=string|required=true|desc=Enter the URL to the media item. (required)
## @paramPreload:title=Preload|type=enum|enumValues=auto,metadata,none|default=auto|desc=What aspects of this media item should autoload on page load?
## @paramControls:title=Show Controls|type=boolean|desc=Should the media player control be visible?|default=true
## @paramAutoPlay:title=Auto Play|type=boolean|desc=Should the media item automatically start playing when the page loads?|default=true
## @paramPoster:title=Poster|type=string|required=false|desc=Enter the URL of an image that will be displayed prior to the video starting. (not required)
## @paramWidth:title=Player Width|type=string|required=false|desc=Enter the desired width of the player. (blank will use the original width)
## @paramHeight:title=Player Height|type=string|required=false|desc=Enter the desired height of the player. (blank will use the original height)
#set( $Q = '"' )
#if ( $paramPreload )
#set ( $preload = " preload=${Q}$paramPreload${Q}" )
#else
#set ( $preload = " preload=${Q}preload${Q}" )
#end
#if ( !$paramControls || $paramControls == true )
#set ( $controls = " controls=${Q}controls${Q}" )
#end
#if ( !$paramAutoPlay || $paramAutoPlay == true )
#set ( $autoPlay = " autoplay=${Q}autoplay${Q}" )
#end
#if ( $paramPoster && $paramPoster != "" )
#set ( $poster = " poster=${Q}$paramPoster${Q}" )
#end
#if ( $paramWidth && $paramWidth != "" )
#set ( $width = " width=${Q}$paramWidth${Q}" )
#end
#if ( $paramHeight && $paramHeight != "" )
#set ( $height = " height=${Q}$paramHeight${Q}" )
#end
<ac:macro ac:name="html">
<ac:plain-text-body><![CDATA[
<script src="//cdn.jsdelivr.net/mediaelement/2.16.3/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/mediaelement/2.16.3/mediaelementplayer.min.css">
<video class="mejsPlayer"$!controls$!autoPlay$!poster$!width$!height$!preload src="$paramSource"></video>
<script type="text/javascript">
AJS.toInit(function(){
AJS.$('.mejsPlayer').mediaelementplayer();
});
</script>
]]></ac:plain-text-body>
</ac:macro>

[Raf Wenger]

Hi Davin. I would love to try your macro but I don't know how to setup mediaelement.js on my IIS 7 server. Can you please give me any pointers? I've done a lot of googling without any success. THanks!

[Davin Studer]

You don't really need to host it locally. You could use a CDN. I changed the code above and swapped out the .js and .css file to use a CDN (content delivery netowrk).

[Raf Wenger]

Thanks Davin! Appreciate your help. I got it to work using a CDN or hosting it locally. One more thing though. When the video plays in Confluence the timer slider doesn't work. I can't go forward or back in the video. Only pause/play works and the volume. Yet when I drag and drop the same video from Windows Explorer into Chrome, it plays and I can go forward or back in the video. It makes me think something is up with Confluence. Have you experienced this too? Cheers Raf

[Scott Selberg]

I've also found the Atlassian provided multimedia macro not playing videos well.  The user macro workaround work, but are clumsy.  I wrote a full plugin that has the auto-complete of the file name field that my company is going to be using.  I dropped it and the source code into bitbucket in case other users want to give it a spin.

The plugin does provide a multimedia macro that can be enabled (along with disabling the Atlassian multimedia macro) that will replace the provided macro.

https://bitbucket.org/saselberg/confluence-plugin-macro-html5-multimedia

[Raf Wenger]

Hi Scott. Thanks for the plugin. Works a treat. I have one outstanding issue. I cannot skip ahead in the video (like you can on youtube). Is that a limitation of Confluence or is there a workaround? Cheers Raf

[Scott Selberg]

Hi, not sure. It will probably require a modern browser as the video player is built in. This macro is simple wrapping the video with the html5 tags. I've been using Chrome and Firefox. Our company has tools that require IE8 so I've not done any testing with the latest version of it. On Chrome and Firefox, there is a slider which can be moved to advance the video.

[Raf Wenger]

I am using the latest version of Chrome and if I try to skip headed the video (by clicking anywhere on the slider) it revert immediately to where the video is currently playing. I thought it could be a problem with the video file I'm using, but the file opens fine directly in Chrome and I can click anywhere on the slider and the video will play from there. Could the problem be caused by the Tomcat server running Confluence which may not support pseudo-streaming. Can you please confirm it works for you? I have just installed a trial version of Confluence version 5.5.7 on a newly imaged laptop and it still not working for me. Thanks! Raf

[Raf Wenger]

EDIT: Seeking part of the video works fine in IE 11 so the problem is Chrome and not Confluence. We're using Chrome as our default browser at my company. Any ideas what I can do to make this work? Thanks heaps for your help!

[Scott Selberg]

Hi, can you view the source an cut/paste the video block used to display it. I'm wondering if somehow the html is not being formed correctly and it would be helpful to see it. I am using Chrome and I can use the slide to jump to any point in the video without issues. I'm using subversion to revision my plugins inhouse, so it's possible I introduced a bug when I copied it over to git with bitbucket.

[Michael Brinson]

Scott Selberg, you are a freaking rockstar! Thank you so much for that. What in the world is wrong with Confluence? I mean, granted, I understand there is a huge amount of interplay between plugins, and core functionality that must be regression tested, etc, etc, etc, but it's a bit frustrating when their core macros don't work as advertised and yet they're putting some much time and energy into continually adding NEW features instead of ensuring that the ones they already have work as they should. Anyway, you're awesome for creating and sharing this Scott. Thanks again!

[Mark]

Just to be clear/confirm: The ability to use the built-in macro and wiki language to embed a video is or isn't possible?

If a workaround of using HTML is the only thing that will do it, OK. I just don't want to build on a workaround without exploring the possibility of fixing the underlying issue - if that makes sense?

[Matthew J. Horn]

I remember trying to implement a smooth solution using the built in media macro and gave up. It was a year or more ago, but I remember getting frustrated with some aspects of it.

Instead, I use HTML macros with iframes to point to the remote services. But, you should be able to configure a local flash player (or whatever player) using the same technique.

[Mark]

I found out, from the attachments page, the full path to the file works OK...

https://sitename/download/attachments/123456789/testVideo.mp4?api=v2

[Mark]

As previously stated YouTube/Vimeo is not allowed - the videos have to be hosted internally. Before posting I read several posts from users who had the same problem and YT/Vimeo is always suggested even when they explicitly mentioned the privacy of the video is critical.

I've tried the HTML below but I think the source path is wrong - what would the source be for an mp4 attached to the current page? The file is attached to the current page but the path mentioning just the filenames doesn't work.

<video width="550" controls="controls"> <source src="testVideo.mp4" type="video/mp4"></source> </video>

And overall aren't these workarounds? Neither suggestion seeks to fix the underlying problem. I'd hoped I was doing something wrong - some basic newbie gotcha. I guess not. :o(

[Matthew J. Horn]

I was thinking that you could use a private channel that is password protected (I don't know what Vimeo calls it, but I think that's what YouTube calls it). Takes the streaming load off of your server. It's not free, but it's worth it.

Barring that, the path will be the same for any attachment: try attaching a file and adding a link to the page, saving the page, and then mousing over the link. You'll notice that it's stored in an /attachments directory with a unique ID as part of the path. Something like this:

www.example.com/page+name/attachments/42/filename.mp4

So your local reference will need to point to "attachments/42/filename.mp4".

hth,

matt