JSFiddle - React, Tailwind, and code Playground

by leonardo_ciaccio

HTML

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

JavaScript

/*

    Coded by Leonardo Ciaccio
        http://grabanymedia.altervista.org
    
    App name : ffmpeg helper for join video
    
    Credits:
        http://www.html5rocks.com/en/tutorials/file/dndfiles/
        https://trac.ffmpeg.org/wiki/Concatenate

    ATTENTION : AFTER DOWNLOAD .BAT FILE PUT ALL FILES AND .BAT IN
    FFMPEG.EXE FOLDER

*/

function _checkBrowser( success ){
    
    success = success || function(){};
    
    // File API support
    if( window.File && window.FileReader && window.FileList && window.Blob ){
        
        success();
        
    }else{
        
      alert( "Your browser don't support this script, use Chrome ;)" );
    
    }

}

function _createDownloadButtonBat( text ){
    
    text = text || "O.o";
    
    var a = document.body.appendChild( document.createElement( "a" ) );
    
    a.innerHTML = "Download Batch File";
    a.setAttribute( "download", "MyConcat.bat" );
    a.setAttribute( "href", "data:text/plain;charset=utf-8," + text );
    
    document.body.appendChild( a );
    
    a.click(); 

}


function _getFFconcatCommand( evt ) {
    
    // List files
    var files = evt.target.files;

    // List some properties
    var output = [],
        ext    = "flv";
    
    for( var i = 0, f; f = files[ i ]; i++ ){
        
      output.push( escape( f.name ) );
        
    }
    
    // first file set the extension
    ext = output[ 0 ].split( "." ).pop();
    
    // Concat file list
    var cmdline = "ffmpeg -i \"concat:" + output.join( "|" ) + "\" -c copy output." + ext;
    
    //document.getElementById( "list" ).innerHTML = cmdline;
      
    _createDownloadButtonBat( cmdline );
    
}

_checkBrowser( function(){

    document.getElementById( "files" ).addEventListener( "change", _getFFconcatCommand, false );

} );