Jump to content

- - - - -

Using GIFs or Tiny movies instead of thumbnail previews

gifs previews thumbnails

  • Please log in to reply
1 reply to this topic

#1 brianatthebeach



  • Members
  • PipPipPip
  • 107 posts

Posted 29 June 2017 - 10:48 PM



I searched the forum for this so unless I missed it I did not see this subject being addressed.


I have been looking to replace the thumbnails in AVS with either GIFs or a very tiny movie preview.  I have modified some code that I found that will easily convert the 20 thumbs in each tmb folder to a same size/quality GIF preview.  You can also go through each video file and do this from scratch but using existing thumbs is much faster.  


The code uses imagemagick to combine and create the GIF.  Also since we have ffmpeg etc I would think adding code to make a duplicate tiny movie preview, in post conversion, would be very easy as well.  I have not looked into creating movie previews but I have no doubt that it is doable without much trouble.   I'd like to explore both options if anyone wants to as well.


If anyone is interested in this kind of thing I will post the simple code to make the GIFs but I would like some help locating where in the AVS script we would handle a hover over the GIF to make it start playing.  In other words what's the simplest way to integrate the GIFs in to AVS page?







I was able to integrate both GIFs and tiny webm movies like pornhub uses, into avs 3.3.  From the code I looked at, it should work with avs 4 as well.

The integration is not elegant but it's a first draft and I simply don't know jquery at all except to copy and tweak available code examples.  Also because I suspect the webm conversions fail sometimes it would be nice to fall back to gif or thumb rotation if the webm movie is missing.  The webm is only a 10 second sped up slice that I took from the middle of the video so that I would catch some of the action in the movie.  A fancier version would take 3,4,or 5, 2 to 3 second cuts from the video and concatenate them to make an exciting mini preview movie.


these are NON PORN examples below


original hidef 1 minute movie



GIF made from 20 avs thumbs



preview WEBM movie made using ffmpeg from mp4 vid in my iphone folder



Lastly, there will be compatibility issues with older browsers so fallback to GIF or thumb rotation is needed.


here's demo page of what mini movie previews would look like(NON PORN LINK) and the GIF previews that replace the thumb rotations in AVS




Things are working and the previews look really nice.  Look at pornhub and you'll get the idea.  


using preload="none" in the <video> tag will keep the mini previews from loading so your pages will load in the normal amount of time.  My pages are loading about 1Mb until you mouseover a preview. Each mouseover adds .25Mb to .5Mb to the page data usage.



Edited by brianatthebeach, 17 July 2017 - 12:41 AM.

#2 brianatthebeach



  • Members
  • PipPipPip
  • 107 posts

Posted 02 July 2017 - 01:26 AM

Most of this applies to desktop/laptop viewing, of course.


I haven't seen avs 4 in action but I looked at the code and it looks like it still uses jquery to rotate the thumbnails.  I have successfully generated GIF files and webm movies in each of my 20,000 tmb folders.  Then I changed the jquery and html to load the first thumb as normal and on mouseover/hover the GIF begins to play and stop when you stop hovering.  All the GIFs load on page load so you would have to add the number of videos displayed per page X .5Mb  On my index page I have 33 videos displayed so that is 17Mb of GIFs loading.  I'm not sure if AVS loads all the thumbs on page load but if they do then it's about the same between the thumb rotator and the GIFs loading.  With other code I modified you could generate GIFs directly from your movies giving you more control over the number of images in the GIFs.  I think 20 is about right for what is needed.  


PM or reply if this interests you and I'll post the code.




ps see my first post in this thread for more details.

Edited by brianatthebeach, 13 July 2017 - 03:43 AM.