Is it possible to use command like: ffmpeg -i video_1920.mp4 -vf scale=640:360 video_640.mp4 -hide_banner to reduce the resolution of a video in the pure JavaScript. For example I got a dropdown menu in which I have < a > tag, so I want to do a video quality selection by clicking on that menu hyperlink with JS. How to implement that properly, please help.
Asked
Active
Viewed 2.3k times
9
-
1You shouldn't ask questions with the description of your result. Show what you have tried and where you have failed. – Anastasios Selmani Jan 15 '18 at 18:35
-
4I have no idea how to iplement that with JS.No much examples of using ffmpeg with js on windows. – Vladyslav Semeniuk Jan 15 '18 at 18:56
-
do you mean calling ffmpeg from server-side js, like node.js server? Take a look at https://stackoverflow.com/questions/21921790/best-approach-to-real-time-http-streaming-to-html5-video-client might help – andrii Jan 15 '18 at 19:32
-
I just asking is that possible to write that line and turn it into JS variable?Like var ResolutionChange = ffmpeg -i video_1920.mp4 -vf scale=640:360 video_640.mp4 -hide_banner for using it later. – Vladyslav Semeniuk Jan 15 '18 at 20:04
-
Where do you expect this ffmpeg will run? On your server, or on the PC, or on a mobile device? – Alex Cohn Jan 15 '18 at 20:56
-
On my server(website) – Vladyslav Semeniuk Jan 15 '18 at 21:05
1 Answers
13
If you want to do the work in the browser, i.e. on the users machine rather than your server, there are a number of projects which provide an ffmpeg wrapper in Javascript. This one is the most popular at the moment, I believe:
You would need to do some testing - video processing is very compute intensive and may not work well for you in the browser.
If you want to do it server side, in a Javascript based server like node for example, then again there are libraries available - e.g.:
Update 2022 - the following library is also worth looking at for browser side - I have used it and found it works well and the performance, leveraging web assembly language is noticeably better:
You do need to be aware of the need for SharedArrayBuffer support:
Only browsers with SharedArrayBuffer support can use ffmpeg.wasm, you can check HERE for the complete list.
The link referred to above is here: https://caniuse.com/sharedarraybuffer
Mick
- 24,231
- 1
- 54
- 120
-
No i want to divide 1 HD video into 4 resolution formats on server, then with JS chose that formats in dropbox menu.But i dont know how to implement that =( – Vladyslav Semeniuk Jan 16 '18 at 12:39
-
Do you mean you want to implement an ABR approach - i.e. let the video player select the best resolution for the network conditions? Or do you just want the user to do it manually? Note that the ABR approach, used with most of the common players will allow the user manually select the bitrate anyway. – Mick Jan 16 '18 at 14:32
-
Well if you want to do it simply and are using static video files, then you can just have 4 different video files and use your JavaScript to change the 'src' of the video element to whichever one the user selects. If you want the ABR approach then you will not have to do anything if you are using a common player (like Shaka or dash.js) as they have the ability to select manually built in usually, but you do need to be aware that the server site is considerably more complicated and you would probably want to use a dedicated streaming server or streaming service. – Mick Jan 16 '18 at 18:11
-
I just want this: When user loads his video file in HD, my FFMPEG plugin in php script will divide that HD resolution into a couple of lower resolutions(so ill have a few video resolutions on a server).Then, when user clicks on that video and choose quality, I load prefered resolution to him.I just want to implement that but i dunno how.Sorry for my bad english. – Vladyslav Semeniuk Jan 16 '18 at 18:20
-
Well, you can use the server ffmpeg library above and run the ffmpeg commands to create each bit rate yourself and then store them statically. You can see some example commands here: https://trac.ffmpeg.org/wiki/Creating%20multiple%20outputs. if you do want to use ABR, then this is a good example using DASH: https://bitmovin.com/mp4box-dash-content-generation-x264/ – Mick Jan 17 '18 at 11:06