Recherche avancée

Sur d’autres sites (12132)

• How to insert lots of small looped videos or GIFs in HTML (thousand or more), but keep decent quality and page size ?

  10 novembre 2020, par Armen Avakian

  I need to place a thousand of small GIFs (20x20 pixels or slightly bigger) in the HTML. Almost all of them are visible at once, when page is loaded. There are several ways I tried, but each one has a problem.

  


  Way 1. Placing GIF images. GIFs are inefficient and heavy, so a lot of traffic will be needed to load the page. WEBP is better, but it is not supported fully in recent versions of Safari. So I made GIFs smaller, with low quality. In Safari I am loading this low quality GIFs, in other browsers I load WEBP. And it works nice, but the problem is that with a thousand of small GIFs, a user will need to load more than 600 MB for this page... So this way is... not as good. I can make them even lower in quality, but I don't want to make experience worse. Even now the quality is average.

  


  Way 2. Making MP4 and embedding them into looped video tags with autostart, so they look like a GIF. This way would be AWESOME, because MP4 is much smaller in size, but it keeps good quality. The problem here is when I add even 10-15 small videos in tags, the browser can't manage with it and starts working veeeery slowly. Each video is becoming very slow. So the experience is even worse than with low quality GIFs.

  


  My question is – how to achieve best way in this case, keeping decent quality and low sizes for each video ? Maybe I can use somehow MP4 videos in another way ? Does anyone know how to solve this issue ?

  


  For scaling videos and converting to GIF/WEBP I use ffmpeg.

  


• FFMpeg : Convert image + audio to MP4 60FPS including FadeIn / FadeOut and overlay

  6 juillet 2022, par Dev01

  Here is what I'm trying to achieve :

  


  

  1. Inputs are an MP3 or WAV, and an image (JPG or PNG)

  


  2. The output should be an MP4 video with the MP3 audio with the image, at 60FPS for a very smooth fade in/fade out (black) on the video (1s each)

  


  


  I strugguling to make this fade in / fade out.
Here is what I have :

  


   ffmpeg -r 1 -loop 1 -i image.jpg -i audio.mp3 -acodec copy -r 60 -shortest -vf fade=in:0:01 -pix_fmt yuv420p output.mp4


  


  My fadein is static, so black image and then my video, not smooth.
How do I get a smooth 60FPS fade ?

  


  I also have another request, let's say I have an overlay video that I want to concatenate to my video. If I concatenate a video to the existing video, the overlay will also be on top of the fades which is not right, how can I achieve this ? Thank you so much.

  


• ffmpeg perspective filter animation error

  17 mars 2021, par eeun

  I'm trying to create a pseudo-3d pan effect in ffmpeg using the perspective filter.

  


  Here is a sample for the starting point...

  


  ffmpeg -y -filter-complex "color=black:s=1600x900,trim=0:5,drawgrid=width=100:height=100:thickness=2:color=white,perspective=x0=200:y0=200:x1=1600:y1=0:x2=200:y2=700:x3=1600:y3=900[skew]" -an -map [skew] "skew-start.mp4"


  


  And here is a sample for the end point...

  


  ffmpeg -y -filter-complex "color=black:s=1600x900,trim=0:5,drawgrid=width=100:height=100:thickness=2:color=white,perspective=x0=0:y0=0:x1=1600:y1=0:x2=0:y2=900:x3=1600:y3=900[skew]" -an -map [skew] "skew-end.mp4"


  


  So far so good. Adding the animation would give this...

  


  ffmpeg -y -filter-complex "color=black:s=1600x900,trim=0:5,drawgrid=width=100:height=100:thickness=2:color=white,perspective=eval=frame:x0='200-(200*t/5)':y0='200-(200*t/5)':x1=1600:y1=0:x2='200-(200*t/5)':y2='700+(200*t/5)':x3=1600:y3=900[skew]" -an -map [skew] skew.mp4


  


  This is where the problem occurs. I get an error saying [Eval @ 000000f36ebfebf0] Undefined constant or missing '(' in 't/5)' Error while filtering: Invalid argument

  


  The perspective docs say it should work with an eval=frame option. Anyone got any ideas ? Does this look like a bug in ffmpeg ? I'm using the latest version, 4.3.2.