MyBB Community Forums

It's a very new service from Imgur, similar to GFYcat somewhat (which I also made an embed for, here)

But I thought I may as well implement some support on my site for it right now anyway.

Intent;

Getting [gifv]http://i.imgur.com/zvATqgs.gifv[/gifv] tags to work and embed, and play.

Regular Expression

\[gifv\]https?\://i\.imgur\.com/([a-z0-9]+)\.gifv\[/gifv\]

Replacement (without loading bar, I had trouble implementing it in a working state)

<center>
<div class="video-container" style="width: auto; height: auto;">
<video poster="https://i.imgur.com/$1h.jpg" preload="auto" autoplay="autoplay" muted="muted" loop="loop" width="auto" height="auto">
<source src="https://i.imgur.com/$1.mp4" type="video/mp4">
<object type="application/x-shockwave-flash" height="auto" width="auto" data="https://s.imgur.com/include/flash/gifplayer.swf?imgur_video=https://i.imgur.com/$1.mp4&imgur_width=auto&imgur_height=auto">
</video>
</div>
</center>

Works with either HTTP or HTTPS when I test the mycode.

But I have a problem.

When i post it on the forum it does not work (or does not load, initial image displays and player controls are able to be opened).
BUT, it does play in a post preview... just then not when posted.

Any ideas on this?

Edit, am using a V2 of the above replacement

<center>
<video poster="https://i.imgur.com/$1h.jpg" preload="auto" autoplay="autoplay" muted="muted" loop="loop" width="660" height="370">
<source src="https://i.imgur.com/$1.mp4" type="video/mp4">
<object type="application/x-shockwave-flash"
height="370"
width="660"
data="https://s.imgur.com/include/flash/gifplayer.swf?imgur_video=https://i.imgur.com/$1.mp4&imgur_width=660&imgur_height=370">
<param name="movie" value="https://s.imgur.com/include/flash/gifplayer.swf?imgur_video=https://i.imgur.com/$1.mp4&imgur_width=660&imgur_height=370" />
<param name="allowscriptaccess" value="never" />
<param name="flashvars" value="height=370&amp;width=660" />
<param name="width" value="370" />
<param name="height" value="660" />
<param name="version" value="0" />
<param name="scale" value="scale" />
<param name="salign" value="tl" />
<param name="wmode" value="opaque" />
</object>
</video>
</center>

Which seems to alleviate some problems, at least in FF 35.0a1

Also, if it makes any difference this is being done on a 1.6.15 board.

I've put together a far simpler code which personally I've had none of the above playback issues with.
Although since Updating to FF 35.0a1 (with E10S off) i've had no problems with the V2 replacement above, the newst code is just cleaner.

Regular Expression

\[gifv\]https?\://i\.imgur\.com/([a-z0-9]+)\.gifv\[/gifv\]

Replacement

<center><iframe allowfullscreen="" frameborder="0" scrolling="no"  width="660" height="370" src="//i.imgur.com/$1.gifv#embed"></iframe></center>

Only problem I've found is that it will restrict to the width and height you define in your bbcode (which isnt necessarily a bad thing) but will blackbar sides or top of anything smaller.
For larger videos it will scale them down but again, will blackbar anything with a different aspect ratio.

I've implemented on my forum and posted a few test case and am going to gague feedback.

I tested the V2 code in Post 1 against the new code in my second post and here are the results (v2 on top, iframe based below)

Large Image: http://i.imgur.com/aumn9Br.jpg
(bear in mind this image is just an mspaint chopup of 3 posts on my forum)

With the V2, it restricts the gifv to 660x370 as defined. It will resize if too large or too small to fit in the defined resolution without cropping and does not give any bars.

With the iframe it downscales larger gifv files to the set resolution, but anything that is a different aspect ratio it gives black bars.
Any gifv smaller than the set resolution stays its original size and gets a top-center aligned and given whitebars for the rest of the set resolution.

I think from what I've tested the V2 replacement is substantially better and I'm going to stick with that on my forum.

p00lz

p00lz