Support for WebM

a_5mith

So I made this yesterday, and thought someone on here might like it. I've added support for webm files via gfycat.com, gfycat.com takes an ordinary .gif file, and converts it into a webm file, you then take the URL of that file, put it on your forum. Instant chicken dinner.

Installation

npm install nodebb-plugin-gfycat

I'd like to support all .webm files, but I don't know how, so if someone wants to pull on my request, that would be great, github can be found here

I'd also like for it to automatically convert .gifs posted to the forum into webm files via their API, but again, not entirely sure how to.

RIP .gif etc

luke

Awesome!

a_5mith

Asking for help now more than anything. Basically I'm converting the iframe to use HTML5 Video tags, the unique thing about gfycat is the fallback methods, if it's not supported, it falls back to the .gif, the trouble is, I need to use the api to grab that data, now, I've forked @julian xkcd plugin and hacked it to pieces, it doesn't crash the forum (an achievement in my eyes for my first plugin that's not some regex), but I can't actually get the api to give me the information I need.

Can anyone see anything specifically wrong with what I've got here:

GitHub - a5mith/nodebb-plugin-gfycat: Embed gfycat videos into NodeBB

Embed gfycat videos into NodeBB. Contribute to a5mith/nodebb-plugin-gfycat development by creating an account on GitHub.

GitHub (github.com)

Any help would be great, means I can push an update to this plugin out just that little bit quicker.

EDIT: I made it a seperate plugin because I don't fully understand github and branches yet.

julian

@a_5mith What's the problem you're experiencing?

a_5mith

@julian it just won't connect to the api. It's parsing the template file, but it's not getting the values from the api itself, so the page loads as {thing.otherthing} rather than the link it should be.

a_5mith

Ok I made some progress, I'm connected to the api, however the video code doesn't work.

The code in the templates file is

<div class="row">
<!-- begin gfyItem -->
<video width="640" height="320" poster="//thumbs.gfycat.com/{gfyItem.gfyId}-poster.jpg" style="display: block;" muted="muted" loop="" autoplay="" class="gfyVid" id="gfyVid1">
<source type="video/webm" src="{gfyItem.webmUrl}" id="webmsource">
<source type="video/mp4" src="{gfyItem.mp4Url}" id="mp4source">
Not supported, please try the URL: <a href="{gfyItem.gifUrl}">{gfyItem.gifUrl}</a>.
</video>
<!-- end gfyItem -->
</div>

And what comes out, is

<div class="row"><a href="Correct URL">Correct URL</a></div>

So it's connecting, but there seems to be an issue with running the video aspect of this, it's definitely not my browsers as I'm using Canary & Firefox 30.0. So one of the two fallbacks should work. All I get in Chrome is ::before and ::after either side of the link.