Adam's Lair Forum

game development and casual madness
It is currently 2017/04/28, 02:30

All times are UTC + 1 hour [ DST ]




Post new topic Reply to topic  [ 6 posts ] 
Author Message
PostPosted: 2014/10/11, 13:18 
Site Admin
Site Admin
User avatar

Joined: 2013/05/11, 22:30
Posts: 1949
Location: Germany
Role: Professional
Hi everyone,

I'm experimenting with a new bbcode tag to allow embedding high-qualify gif videos from Gfycat. Here's how it looks like:

Code:
[gfycat]MellowContentAmericanbittern[/gfycat]


becomes

Gfycat Video - Click to Play. [Source]


It's smaller than any .gif could be, higher quality than the usual mp4 videos and with a smooth 60 FPS. The downside is that some browsers may not support it natively and will need a plugin for that (I'm looking at YOU, Internet Explorer!) and I'd like to get your opinion on this. If you can all see the above video, I'll probably just make the new tag public and use it from now on. If you have a better idea or dislike the fact that IE users may need a plugin, or dislike the promotion of gif-like video usage in general, I'm glad to hear your opinion.

As far as I know, there is no easy way to use HTML to automatically replace the video tag with something else if the required .webm format is not available, especially since IE11 doesn't support conditional tags anymore.

In case, any of you are proficient with bbcodes and web development, here's the HTML code I'm using right now.

Code:
<div class="video-container" style="width: auto; height: auto;">
   <video preload="auto" autoplay="autoplay" muted="muted" loop="loop" width="auto" height="auto">
      <source src="http://zippy.gfycat.com/{SIMPLETEXT}.webm" type="video/webm" />
      <source src="http://fat.gfycat.com/{SIMPLETEXT}.webm" type="video/webm" />
      <source src="http://giant.gfycat.com/{SIMPLETEXT}.webm" type="video/webm" />
      <source src="http://i.imgur.com/k3zUa1H.mp4" type="video/mp4" />
      Your browser doesn't seem to support the video tag or the webm format. Maybe there's a plugin for that? <a href="http://gfycat.com/{SIMPLETEXT}">View Source Video</a>
   </video>
</div>


I'm really not an expert on this, so any improvement suggestions are appreciated!

_________________
Blog | GitHub | Twitter (@Adams_Lair)


Top
 Profile  
 
PostPosted: 2014/10/11, 15:33 
Forum Addict
Forum Addict
User avatar

Joined: 2013/09/19, 14:31
Posts: 823
Location: Italy
Role: Hobbyist
Looks really good (Firefox user here) and works without issues

What is the procedure to upload a "video"? do you start with a gif or a movie or..?

_________________
Come on Duality's Discord channel. It's entertaining and productive! :mrgreen:


Top
 Profile  
 
PostPosted: 2014/10/11, 18:29 
Site Admin
Site Admin
User avatar

Joined: 2013/05/11, 22:30
Posts: 1949
Location: Germany
Role: Professional
You upload your .gif file on Gfycat and then use the
Code:
[gfycat]xyz[/gfycat]
tag with the strange looking name tag from your upload, and that's it :)

Unlike uploading regular gifs to imgur or elsewhere, you don't really have to worry about compression, if the duration and measurements of your clip are reasonably small. You can also upload 60 FPS gifs that normally wouldn't display correctly in browsers and get smooth 60 FPS animation back. To me, this is the greatest part. High framerates just look so much better :D

_________________
Blog | GitHub | Twitter (@Adams_Lair)


Top
 Profile  
 
PostPosted: 2014/10/12, 15:38 
Site Admin
Site Admin
User avatar

Joined: 2013/05/11, 22:30
Posts: 1949
Location: Germany
Role: Professional
Allright, the new bbcode tag is now available for everyone. We'll see how it goes, have fun :D

_________________
Blog | GitHub | Twitter (@Adams_Lair)


Top
 Profile  
 
PostPosted: 2014/10/12, 21:25 
Site Admin
Site Admin
User avatar

Joined: 2013/05/11, 22:30
Posts: 1949
Location: Germany
Role: Professional
I've updated the bbcode HTML to fall back to mp4 in browsers that do not support the webm format. Here is the updated HTML replacement, in case anyone is interested:

Code:
<div class="video-container" style="width: auto; height: auto;">
   <video preload="auto" autoplay="autoplay" muted="muted" loop="loop" width="auto" height="auto" style="max-width: 100%;">
      <source src="http://zippy.gfycat.com/{IDENTIFIER}.webm" type="video/webm" />
      <source src="http://zippy.gfycat.com/{IDENTIFIER}.mp4" type="video/mp4" />
      <source src="http://fat.gfycat.com/{IDENTIFIER}.webm" type="video/webm" />
      <source src="http://fat.gfycat.com/{IDENTIFIER}.mp4" type="video/mp4" />
      <source src="http://giant.gfycat.com/{IDENTIFIER}.webm" type="video/webm" />
      <source src="http://giant.gfycat.com/{IDENTIFIER}.mp4" type="video/mp4" />
      Your browser doesn't seem to support the video tag. Maybe there's a plugin for that? <a href="http://gfycat.com/{IDENTIFIER}">View Source Video</a>
   </video>
</div>

_________________
Blog | GitHub | Twitter (@Adams_Lair)


Top
 Profile  
 
PostPosted: 2014/10/13, 22:58 
Site Admin
Site Admin
User avatar

Joined: 2013/05/11, 22:30
Posts: 1949
Location: Germany
Role: Professional
Modified Gfxcat videos to play on click due to heavy CPU load of decoding mp4 and webm videos:

Code:
<div class="video-container">
  <video preload="auto" muted="muted" loop="loop" poster="http://thumbs.gfycat.com/{IDENTIFIER}-poster.jpg" style="height: auto; max-width: 100%;" onmousedown="if (this.paused) { this.play(); } else { this.pause(); }">
     <source src="http://zippy.gfycat.com/{IDENTIFIER}.webm" type="video/webm" />
     <source src="http://zippy.gfycat.com/{IDENTIFIER}.mp4" type="video/mp4" />
     <source src="http://fat.gfycat.com/{IDENTIFIER}.webm" type="video/webm" />
     <source src="http://fat.gfycat.com/{IDENTIFIER}.mp4" type="video/mp4" />
     <source src="http://giant.gfycat.com/{IDENTIFIER}.webm" type="video/webm" />
     <source src="http://giant.gfycat.com/{IDENTIFIER}.mp4" type="video/mp4" />
     <a href="http://gfycat.com/{IDENTIFIER}">[ View Video ]</a>
  </video>
  <div style="font-size: 50%; padding: 0px; margin: -2px 0px 2px 0px;">Gfycat Video - Click to Play</div>
</div>

_________________
Blog | GitHub | Twitter (@Adams_Lair)


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 6 posts ] 

All times are UTC + 1 hour [ DST ]


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group