Recherche avancée

Sur d’autres sites (8991)

• How do I add cross-fade when concatenating video with intermediate files using FFmpeg

  10 juillet 2022, par Sandun Tharaka

  I am working on concatenating each video with FFmpeg intermediate files, and want to add cross-fade when merging each of the videos.

  


  const ffmpegArgs = [
  "-y",
  "-f",
  "mpegts",
  "-i",
  `concat:${intermediateFiles.join("|")}`,
  "-c",
  "copy",
  "-bsf:a",
  "aac_adtstoasc",
  resultPath,
];


  


  Here is the function to take intermediate files for each video :

  


  const ffmpegArgs = [
  "-y",
  "-i",
  file,
  "-c",
  "copy",
  "-bsf:v",
  "h264_mp4toannexb",
  "-shortest",
  "-avoid_negative_ts",
  "make_zero",
  "-fflags",
  "+genpts",
  "-f",
  "mpegts",
  intermediateFilePath,
];


  


• How do I add cross-fade when concatenate video with intermediate files using ffmpeg

  3 juillet 2022, par Sandun Tharaka

  I am working on concatenate each video with ffmpeg intermediate files, I want to add cross-fade when merging each of the video.

  


  const ffmpegArgs = [
  "-y",
  "-f",
  "mpegts",
  "-i",
  `concat:${intermediateFiles.join("|")}`,
  "-c",
  "copy",
  "-bsf:a",
  "aac_adtstoasc",
  resultPath,
];


  


  Here is the function for take intermediate files for each video

  


  const ffmpegArgs = [
  "-y",
  "-i",
  file,
  "-c",
  "copy",
  "-bsf:v",
  "h264_mp4toannexb",
  "-shortest",
  "-avoid_negative_ts",
  "make_zero",
  "-fflags",
  "+genpts",
  "-f",
  "mpegts",
  intermediateFilePath,
];

  


  


• HTML5 transparent video with the greatest cross-browser/system support

  22 juin 2022, par Will Ashworth

  I'm encountering an issue getting videos with alpha transparency to reliably load and play on a web page. After some thorough research, this is where I ended up as a means of video encoding to accomplish transparent video which isn't over a solid background color.

  


  Hoping the general community has insight into why we're noticing weirdness with MacOS Monterey in Safari 15 🤷‍♂️

  


  Note : We tried Lottie as an option for the animations, but what we found was that the DOM was excessively bloated ; which would inevitably cause performance issues for the website. So we went back to video as an option.

  


  Convert to HEVC with alpha

  


  ffmpeg -i "source.mov" -c:v hevc_videotoolbox -allow_sw 1 -alpha_quality 1 -vtag hvc1 output.mov


  


  Convert to VP9 with alpha

  


  ffmpeg -i "source.mov" -c:v libvpx-vp9 output.webm


  


  HTML5 method of serving these files to the browser

  


  <video autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline" class="tmpl-front-page__transition-item tmpl-front-page__transition-item--0 tmpl-front-page__transition-item--banner-video">&#xA;    <source src="path/to/video.mov" type="&#x27;video/mp4;" codecs="hvc1">&#xA;    <source src="path/to/video.webm" type="video/webm">&#xA;</source></source></video>&#xA;

  


  How it works

  


  Essentially, we've learned the following :

  


  

  • Safari supports HEVC with alpha, Chrome does not

  


  • Chrome supports VP9 with alpha, Safari does not

  


  


  Now we let the browser choose which version it wants to use.

  


  There are issues

  


  There's inconsistency in how reliably this works in reality. For example, I'm currently running MacOS Catalina with Safari 14.0.2, and the videos started loading for me when using the above method.

  


  While testing MacOS Monterey with Safari 15.1 inside a Parallels VM, the video doesn't load at all when I test that way. That said, another developer on our team did take the plunge and upgraded to Monterey and has Safari 15.1 ; and he can see the videos loading just fine.

  


  This is getting a little silly, and I'm not sure what else to try. Thanks for any help !