Jump to content


Photo
- - - - -

Animated GIF Module


  • Please log in to reply
10 replies to this topic

#1 dargre

dargre

    Senior Member

  • Members
  • PipPipPipPipPip
  • 991 posts

Posted 19 March 2016 - 09:59 PM

I have developed Animate GIF Module for AVS 3.x script.

It's pretty big module, same like videos/albums or games, includes over 60 new files and Animated GIF Generator from videos on website.

Advanced GIF generator creates high qulaity GIF animated images or either 480x270 or 640x480 size.

Generator use PNG palette extracted from video frames and exact video framerate to create smooth GIF animation.

GIF images are presented on page as single thumb images, loading GIF animation when hovered. Loaded GIF animation use extensively browser's cache to speed up load time and save bandwidth.

Basically GIF generator works similar how Pornub has it. GIF loading on hover seems to work smoother than on Pornhub.

GIF's are fully managed in siteadmin like it is for other modules. Single GIF can be rated, favorited, shared and commented.

 

This is on short.

For full description check http://www.nuevolab....s/avs/gifmodule

 

There is some limit and requirement for such module.

- at the moment it can work only with videos hosted on same server (I'm working to find good idea  for multiservers too)

- GIF generator requires one of newer FFMPEG installed, with palettegen filter support. I guess minimum is ffmpeg 2.6.

Eventually I'm going to write a tutorial how to recompile ffmpeg to newer FFMPEG version for CENTOS 6 and Debian.

 

On Nuevolab you can find a link to live website with GIF module working, where you can preview and even Generate animated GIF from selected video.

It was also already installed on other client's website with AVS script recently, working fine, tweaked on client's demand with some new features.


Edited by dargre, 19 March 2016 - 10:03 PM.

VIDEO.JS - best HTML5 player in the world for AVS script

NUEVOPLAYER 8 - best flash+html5 player for video scripts
Mods, custom code by NuevoLab (Search Suggest, Multiple image upload, Seo mods,and much more)


#2 dargre

dargre

    Senior Member

  • Members
  • PipPipPipPipPip
  • 991 posts

Posted 29 March 2016 - 04:08 PM

GIF Module has been heavily updated.

 

Now apart of animated GIF images it also generates exactly same, small filesize webm and mp4 videos.

Such HTML5 video is default to show on GIF page, also is loading as animation when GIF thumb hovered with mouse (works very smooth).

HTML5 video GIF works great on mobiles. Animate GIF image is not that smooth on mobiles due to hardware restrictions. All is fully responsive of course.

 

All 3 GIF formats are available to download according to user's privileges, and GIF video available to embed (iframe code)

Link to video that GIF was generated from is displayed on GIF page and GIF tags as well.

Webmaster can choose who can download generated GIF image and videos.

 

2 other important changes regarding requirements

 

- if your ffmpeg version is not enough (minimum 2.6), you either must recompile ffmpeg or there is another method to generate GIF if you install ImageMagick on server (it's rather easy)

 

- now GIF generator can also work with video files stored on remote servers (multiserver module)

 

 

All was tested on Nuevolab demo template with AVS script, also on 3 other users websites already.

My installation doesn't overwrite existing files. It's all new files + several existing files to edit, with one or 2 lines of new code.


Edited by dargre, 29 March 2016 - 04:43 PM.

VIDEO.JS - best HTML5 player in the world for AVS script

NUEVOPLAYER 8 - best flash+html5 player for video scripts
Mods, custom code by NuevoLab (Search Suggest, Multiple image upload, Seo mods,and much more)


#3 davym123

davym123

    Newbie

  • Members
  • Pip
  • 17 posts

Posted 10 April 2016 - 01:07 PM

I have ordered this module 2 weeks ago and I'm extremely happy with the coding quality of this module. Everything is very smooth and dargre even provided extra modifications to make it work on my customized script.

 

This module is very recommended!


  • dargre likes this

#4 phicamaster

phicamaster

    Newbie

  • Members
  • Pip
  • 9 posts

Posted 05 May 2016 - 10:53 PM

Hello Dargre!
 
I was thinking, if the gif might be put at the preview videos in place of the video page by replacing the preview in jpg ...
Example: http://www.modelctv.com/videos no tmb jpg, but only 1 gif.
 
Do you think it adaptable?


#5 dargre

dargre

    Senior Member

  • Members
  • PipPipPipPipPip
  • 991 posts

Posted 06 May 2016 - 02:08 AM

It's bad idea.

Fe second gif will not be same representative for video as 20 thumbs from different parts of video.

Above all even 5 second GIF file size is much bigger than 20 jpg thumbs.

Loading such GIF on mouse over takes a lot of time waiting.

 

What I saw on some video site is 1 static thumb, 1 mp4 video (12-15 seconds), 1 webm video (12-16 seconds).

Video takes 6-8 scenes from different time position, each about 2 sec long).

All of it (thumb + 2 videos) should not take more than 1 MB.

Then it's loading fast and smooth, similar as on my GIFs example page or like on this adult site: http://tinyurl.com/my43fto

This is video playing when you mouse over thumb, not a gif.

GIF loads too slow and is too big file size. It's more than 10 times bigger than video file.

For example 5 sec. long 640x360 GIF can be 15MB. Same long video is less than 0.5 MB.

 

It's pretty lot of programming if done professionally.

I do like such programming challenges, but I cannot waste much time on things that later only 1 or 3 people are willing to buy.


Edited by dargre, 06 May 2016 - 02:14 AM.

VIDEO.JS - best HTML5 player in the world for AVS script

NUEVOPLAYER 8 - best flash+html5 player for video scripts
Mods, custom code by NuevoLab (Search Suggest, Multiple image upload, Seo mods,and much more)


#6 theone

theone

    Senior Member

  • Members
  • PipPipPipPip
  • 371 posts

Posted 06 May 2016 - 01:01 PM

 

Hello Dargre!
 
I was thinking, if the gif might be put at the preview videos in place of the video page by replacing the preview in jpg ...
Example: http://www.modelctv.com/videos no tmb jpg, but only 1 gif.
 
Do you think it adaptable?

 

 

GIFS are really inefficient and outdated and have a huge filesize even at very low quality. Probably the only advantage I can think of to using a GIF would be that it can autoplay on mobile devices.

 

MP4 video is much better and could be swapped out on hover of a single image to provide a preview at far better quality in the fraction of the size of a GIF. But, this would require many changes to the script.

 

I usually replace the AVS mouseover effect anyway because anytime you hover (even if you mouseout before a single image changes) it sends 20 requests to the server. Swipe your mouse over a row of videos and watch the unnecessary server requests.



#7 dargre

dargre

    Senior Member

  • Members
  • PipPipPipPipPip
  • 991 posts

Posted 06 May 2016 - 01:36 PM

Animated GIF is still used on many sites for many reasons, though it's not something I was ever impressed.

However certainly using GIF at full framerate and of bigger size is not a good idea.

On mobiles and older browsers such GIF will never be smooth due to GIF framerate limit. Such GIF will be also big filesize, loading slow.

Definitely it's not something to replace rotating thumbs.

Even if my module still produce GIF animated image, it also produce exactly same MP4 and WEBM videos and one of it  (depending on browser) is loading on thumb mouse over and playing as HTML5 video in a loop. Such video is small filesize, so it's loading fast and playing smooth, including mobile devices.

I just coded something very similar to what pornhub website has. It's nearly same. Generated GIF, mp4, webm files are available to download and mp4/webm available to embed on any site. Video GIF has even option to switch sound on/off. The difference is that GIF thumb on mouse over doesn't load GIF image but video (mp4 or webm) and this is much more smoother than loading GIF animation as it is on pornhub.

 

Same would be suggested for thumbs on website. I guess such mp4/webm 12-16 sec video can be about 500 kB size. Not much as for loading on mouse over. The difference is that such video must be a compilation of 5-10 short (2-3 sec) clips merged into single mp4 and webm video.


Edited by dargre, 06 May 2016 - 01:38 PM.

VIDEO.JS - best HTML5 player in the world for AVS script

NUEVOPLAYER 8 - best flash+html5 player for video scripts
Mods, custom code by NuevoLab (Search Suggest, Multiple image upload, Seo mods,and much more)


#8 phicamaster

phicamaster

    Newbie

  • Members
  • Pip
  • 9 posts

Posted 08 May 2016 - 11:50 AM

It's bad idea.

Fe second gif will not be same representative for video as 20 thumbs from different parts of video.

Above all even 5 second GIF file size is much bigger than 20 jpg thumbs.

Loading such GIF on mouse over takes a lot of time waiting.

 

What I saw on some video site is 1 static thumb, 1 mp4 video (12-15 seconds), 1 webm video (12-16 seconds).

Video takes 6-8 scenes from different time position, each about 2 sec long).

All of it (thumb + 2 videos) should not take more than 1 MB.

Then it's loading fast and smooth, similar as on my GIFs example page or like on this adult site: http://tinyurl.com/my43fto

This is video playing when you mouse over thumb, not a gif.

GIF loads too slow and is too big file size. It's more than 10 times bigger than video file.

For example 5 sec. long 640x360 GIF can be 15MB. Same long video is less than 0.5 MB.

 

It's pretty lot of programming if done professionally.

I do like such programming challenges, but I cannot waste much time on things that later only 1 or 3 people are willing to buy.

Hello Dargre.
I had not thought that the gif could occupy so many mb.
 
The example you've done pornhd, has made it perfectly the idea! The site is more immediate and you will immediately understand the genre of video.
I love it!
 
How it could cost the realization of this project? And how many people would join to make it happen?
 
I remain iinteressato and waiting.


#9 dargre

dargre

    Senior Member

  • Members
  • PipPipPipPipPip
  • 991 posts

Posted 20 May 2016 - 11:59 AM

Have you seen my template demo recently?

http://www.modelctv.com/

 

Now it's using video compilation of short (3 sec) clips when mouse over thumb.

My videos for test website are rather very short, so video thumbs are not that impressive as for longer videos, though definitely are better looking than rotating thumbs.

 

After this thread I was asked by other client to create such feature.

Initially I did it for a client not so advanced, taking 3 second clips from video in constant intervals.

 

Later I continued experiments, and step by step I made it much more advanced.

Now I have a generator  that calculates clips start position and interval depending on length of video for videos longer than 40 seconds,

or generates continuous 24 second (or less) clip for shorter video.

But even much more advanced section I added to admin. It can also generate video clip in one step, or:

 

1. regenerate clip compilation video from given time start position

2. regenerate clip compilation video with given time start position for each of eight 3-second fragment separately.

3. regenerate screenshot image (default.jpg) from given time position for a player in pause mode

4. regenerate default thumb (displayed before mouse over) from given time position.

 

Video start time position either for image or video frame can be even decimal value for best accuracy (use comma or dot),

so demanding user can generate really accurate video clips and thumbs/screenshots.

 

I even wrote batch generator for existing videos, however such script must be executed as a CRON job.

 

Some technical information.

Generating video thumb is fast, faster than 20 thumbs, This is obvious, as it's only 2 ffmpeg commands (mp4,webm), instead of 20.

24 second video (8 clips, each 3 seconds) is about 600-700 kB, loading fast and smooth on mouse over.

Average video bitrate is 200-300 kB. It's far enough as per video of thumb size.

 

My system works as hybrid. This means that 20 thumbs are still generated. Video thumbs work for index, videos and related videos. Rotating thumbs work on profile pages and for embedded videos. TO have video thumbs also on profile pages is a lot of changes in multiple template and ajax files. Too much tutorial or code to write as for the price for already lot of code and advanced ffmpeg commands.

 

Install tutorial is not so short (10 steps), but also not very complicated for semi experienced users. It's also 2 new fields into video table in database.

Unfortunately I cannot support self-instalaltion for obvious reson, Of course I offer install service if someone prefer.

 

More detailed information on http://www.nuevolab....avs/videothumbs


Edited by dargre, 22 May 2016 - 02:13 PM.

VIDEO.JS - best HTML5 player in the world for AVS script

NUEVOPLAYER 8 - best flash+html5 player for video scripts
Mods, custom code by NuevoLab (Search Suggest, Multiple image upload, Seo mods,and much more)


#10 apple82

apple82

    Member

  • Members
  • PipPipPipPip
  • 300 posts
  • LocationSpain

Posted 20 May 2016 - 09:28 PM

hi this mod is compatible with mod: multi served ?



#11 dargre

dargre

    Senior Member

  • Members
  • PipPipPipPipPip
  • 991 posts

Posted 21 May 2016 - 09:53 AM

YES, it can generate from videos hosted on other server definded through multiserver plugin. Same like for GIFs module.

This was explained in Nuevolab description.

When video uploaded video thumbs same like standard thumbs are generated from production server, before it is sent to multi server.

If video thumbs regenerated later, or generated new from exisiting video hosted on other server, source video is dowloaded back to production server, thumbs, gif or video thumbs generated and source video deleted from production server. Of course this takes little bit more time, depends on server's download speed.

Also our batch script running as CRON job can generate video thumbs from hosted on multi servers.

 

EDIT

Did first installation of video thumbs for a friend user with AVS script.

Basically all worked fine. The only thing I needed to tweak was batch generator to be more reliable against possible website errors (not existing videos, corrupted videos, etc.). Video thumbs for 1500 videos (6 minutes long average) converted in little bit more than 24 hours using CRON. Video thumbs looks really elegant, and can be even more beautiful if someone has enough time to play with it.


Edited by dargre, 23 May 2016 - 07:28 PM.

VIDEO.JS - best HTML5 player in the world for AVS script

NUEVOPLAYER 8 - best flash+html5 player for video scripts
Mods, custom code by NuevoLab (Search Suggest, Multiple image upload, Seo mods,and much more)