How to Make Video SlideShows with Images and Audio Using Node FFMPEG VideoShow Library

In this post we will be talking about how to create a video slideshow with images and also some background audio using node ffmpeg library videoshow library. You can install this library using npm

 

Practical Video

 

Installation

npm i videoshow

This will install the dependency on your computer.

var videoShow = require("videoshow");

This will install the node library which is installed from node by this statement

 

var images = [
  {
    path: "./images/image1.png",
    caption:"This is the first pic",
    loop:5
  },
  {
    path: "./images/image2.png",
    caption:"This is the second image",
    loop:2
  },
  {
    path: "./images/image3.png",
    caption:"This is the third image"
  },
];

 

Now this code will include all the images for the slideshow. It contains three properties the path of the image, caption to the image and also the loop property which tells how much seconds the image will be there on the videoslideshow.

See also  Build a Coronavirus COVID-19 Country Live Status (Active + Recovered + Deaths) Cases Tracker in Browser Using Vanilla Javascript Full Project For Beginners

 

var videoOptions = {
  loop: 5,
  fps: 25,
  transition: true,
  transitionDuration: 1, // seconds
  videoBitrate: 1024,
  videoCodec: "libx264",
  size: "640x?",
  audioBitrate: "128k",
  audioChannels: 2,
  format: "mp4",
  pixelFormat: "yuv420p",
};

 

These are the video options which can be used to make the slideshow. These are the default options which can be used.

 

// call the videoshow library

videoShow(images,videoOptions)
.audio("sample.mp3")
.save("slideshow.mp4")
.on('start',function(command){
    console.log("Conversion started" + command)
})
.on('error',function(err,stdout,stderr){
    console.log("Some error occured" + err)
})
.on('end',function(output){
    console.log("Conversion completed" + output)
})

 

Now we call the videoshow library to create the actual video slideshow with the actual images we specified before and the video options. We have specified the audio as well with the help of audio option and also we have the save method also to specify the name of the output file and then we have three events the start event the error event and the end event when the processing is completed.

See also  Javascript Project to Show & Hide Columns,Rows of HTML5 Table Dynamically on Mouse Right Click in Browser Full Project For Beginners

 

Leave a Reply