{"id":59407,"date":"2023-05-20T03:01:39","date_gmt":"2023-05-19T17:01:39","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=59407"},"modified":"2023-05-20T09:08:37","modified_gmt":"2023-05-19T23:08:37","slug":"ffmpeg-mux-video-and-audio-media-browsing-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-mux-video-and-audio-media-browsing-tutorial\/","title":{"rendered":"Ffmpeg Mux Video and Audio Media Browsing Tutorial"},"content":{"rendered":"
\"Ffmpeg<\/a>

Ffmpeg Mux Video and Audio Media Browsing Tutorial<\/p><\/div>\n

Onto yesterday’s Ffmpeg Mux Video and Audio Primer Tutorial<\/a> …<\/p>\n

\nThere be a flowerin’ of inner warmth and glo’ towards all our readers, youngins and oldins alike … like!\n<\/p><\/blockquote>\n

Yes, we’re involving good ol’ HTML5 File API<\/a> Object Javascript logic, so our “Intranet” savvy downloaders out there …<\/p>\n

\nFull o’ inner warmth and glo’ towards each other … like!\n<\/p><\/blockquote>\n

… can easily browse for their two media input files, and for the first time ever integrating our ever tweaked<\/a> inhouse client_browsing.htm<\/a> (also a standalone proposition<\/a>)<\/font> (we’d like you to download to MAMP Document Root’s HTMLCSS subfolder) we add “oncontextmenu”<\/a> event changes to its input type=file browser hosting parent iframe element onload event Javascript function as per <\/font> …<\/p>\n

<?php echo ”
\n
\n var voaf='', voaftwo='';
\n
\n function checkif(iois, ival) {
\n if (iois.src.indexOf('?d=') != -1) {
\n var aconto = (iois.contentWindow || iois.contentDocument);
\n if (aconto != null) {
\n if (aconto.document) { aconto = aconto.document; }
\n if (aconto.getElementById('files')) {
\n if (voaf == '') {
\n voaf=iois.src;
\n iois.setAttribute('data-parentspan', 's' + ival.replace('inv.mp4','cbi').replace('inva.mp4','cbix'));
\n document.getElementById('myh1').title='s' + ival.replace('inv.mp4','cbi').replace('inva.mp4','cbix');
\n document.getElementById('myh1').setAttribute('data-url', iois.src);
\n setInterval(voaff, 1000);
\n } else if (voaftwo == '') {
\n voaftwo=iois.src;
\n iois.setAttribute('data-parentspan', 's' + ival.replace('inv.mp4','cbi').replace('inva.mp4','cbix'));
\n document.getElementById('myh3').title='s' + ival.replace('inv.mp4','cbi').replace('inva.mp4','cbix');
\n document.getElementById('myh3').setAttribute('data-url', iois.src);
\n \/\/alert(iois.id + ' data-parentspan=' + iois.getAttribute('data-parentspan'));
\n }
\n \/\/alert(iois.id + ' data-parentspan=' + iois.getAttribute('data-parentspan'));
\n aconto.getElementsByTagName('h1')[0].style.opacity='0.0';
\n \/\/alert('here');
\n aconto.getElementById('files').style.position='absolute';
\n aconto.getElementById('files').style.left='0px';
\n aconto.getElementById('files').style.top='0px';
\n aconto.getElementById('files').style.zIndex='99';
\n aconto.getElementById('files').style.marginLeft='10px';
\n aconto.getElementById('files').style.marginTop='8px';
\n aconto.getElementById('files').style.visibility='visible';
\n aconto.getElementById('files').style.display='block';
\n aconto.getElementById('files').style.backgroundColor='#eeeeee';
\n aconto.getElementById('files').setAttribute('data-hostcont', ival);
\n aconto.getElementById('files').setAttribute('data-hostspan', 's' + ival.replace('inv.mp4','cbi').replace('inva.mp4','cbix'));
\n aconto.getElementById('files').oncontextmenu = function(event) { var suf=event.target.getAttribute('data-hostspan'); parent.document.getElementById(suf).innerHTML=\\\"\" . str_replace(\"\\\\\",\"\\\\\\\\\",dirname(__FILE__) . DIRECTORY_SEPARATOR) . \"\\\" + event.target.getAttribute('data-hostcont'); }<\/font>
\n if (ival == 'inv.mp4') {
\n aconto.getElementById('files').accept='video\/*';
\n aconto.getElementById('files').title='Click to browse for video else right click or two finger gesture to make disappear.';
\n } else {
\n aconto.getElementById('files').accept='video\/*,audio\/*';
\n aconto.getElementById('files').title='Click to browse for video or audio else right click or two finger gesture to make disappear.';
\n }
\n \/\/alert('there');
\n aconto.getElementById('dwstyle').innerHTML+=\\\"<style> #files::before { content: '\\\" + ival + \\\"'; } <\/style>\\\";
\n }
\n }
\n }
\n }
\n<\/code>
\n“; ?><\/p>\n

… to allow a user who prefers the overlayed div contenteditable=true alternative (which speaks back to the HTML form textarea conduit when that form’s “onsubmit”<\/a> event is called<\/font>) onto yesterday’s exclusively textarea<\/i> methodology<\/strong> …<\/p>\n

<?php echo ”
\n
\n function overlay() {
\n var rect=document.getElementById('fcommand').getBoundingClientRect();
\n document.getElementById('moreb').style.position='absolute';
\n document.getElementById('moreb').style.left='' + rect.left + 'px';
\n document.getElementById('moreb').style.top='' + rect.top + 'px';
\n document.getElementById('moreb').style.width='96%'; \/\/' + rect.width + 'px';
\n document.getElementById('moreb').style.height='' + rect.height + 'px';
\n document.getElementById('moreb').style.border='1px solid black';
\n document.getElementById('moreb').style.paddingLeft='20px';
\n document.getElementById('moreb').style.backgroundColor='#f9f9f9';
\n document.getElementById('fcommand').style.opacity='0.0';
\n document.getElementById('moreb').innerHTML='ffmpeg\" . $ffmpegsuf . \" -i <span id=scbi><iframe onload=checkif(this,\\\"inv.mp4\\\"); scrolling=no frameborder=0 id=cbi data-type=file data-value=inv.mp4 data-accept=\\\"video\/*\\\" style=\\\"display:inline-block;height:40px;width:92px;vertical-align:middle;\\\" src=\\\"\/HTMLCSS\/client_browsing.htm?d=975964842271&left=y\\\"><\/iframe><\/span> -i <span id=scbix><iframe onload=checkiftwo(this,\\\"inva.mp4\\\"); scrolling=no frameborder=0 id=cbix data-type=file data-value=inva.mp4 data-accept=\\\"video\/*\\\" style=\\\"display:inline-block;height:40px;width:106px;vertical-align:middle;\\\" src=\\\"\/HTMLCSS\/client_browsing.htm?d=975964842271&right=y\\\"><\/iframe><\/span> -c copy -map 0:v:0 -map 1:a:0 -shortest out.mp4 > voiceover.bad';
\n }
\n
\n function mergechanges() {
\n if (document.getElementById('scbi').innerHTML.indexOf('<') == -1) {
\n document.getElementById('fcommand').value=document.getElementById('fcommand').value.replace(' inv.mp4 ', ' ' + document.getElementById('scbi').innerHTML + ' ');
\n \/\/alert('not oops ' + document.getElementById('fcommand').value);
\n } \/\/else {
\n \/\/alert('oops');
\n \/\/}
\n if (document.getElementById('scbix').innerHTML.indexOf('<') == -1) {
\n document.getElementById('fcommand').value=document.getElementById('fcommand').value.replace(' inva.mp4 ', ' ' + document.getElementById('scbix').innerHTML + ' ');
\n }
\n if (document.getElementById('moreb').innerText.indexOf(' -c ') != -1 && document.getElementById('fcommand').value.indexOf(' -c ') != -1) {
\n if (document.getElementById('moreb').innerText.split(' -c ')[1] != document.getElementById('fcommand').value.split(' -c ')[1]) {
\n document.getElementById('fcommand').value=document.getElementById('fcommand').value.split(' -c ')[0] + ' -c ' + document.getElementById('moreb').innerText.split(' -c ')[1];
\n }
\n }
\n return true;
\n }<\/font>
\n<\/code>
\n“; ?><\/p>\n

… reign supreme collecting their media file specification information in the changed<\/a> voiceover.php<\/a> PHP (we’d want you to download to a local MAMP<\/a> Apache web server’s Document Root folder) and which you can run that PHP there<\/a>.<\/p>\n

The previous work of Animated GIF Creation Install Paths Tutorial<\/a>‘s thread of blog postings has been a great help with this ffmpeg “Intranet feeling” integration work we use, around here, in conjunction with macOS or Windows operating system MAMP<\/a> Apache local web server environments.<\/p>\n

\n

\n

Previous relevant Ffmpeg Mux Video and Audio Primer Tutorial<\/a> is shown below.<\/p>\n

\"Ffmpeg<\/a>

Ffmpeg Mux Video and Audio Primer Tutorial<\/p><\/div>\n

We’ve got another “Intranet feeling” PHP web application “first draft” for you today. The reason we’re opting for “Intranet feeling” (ie. we’re asking you to download the voiceover.php<\/a> PHP to a local MAMP<\/a> Apache web server and run the PHP there<\/a> from its Document Root folder) is that we want to further explore the brilliant …<\/p>\n


\nffmpeg<\/a> -i inv.mp4 -i inva.mp4 -c copy -map 0:v:0 -map 1:a:0 -shortest out.mp4
\n<\/code><\/p>\n

… we got inspired to try via Mux Video and Audio from another Video<\/a> and FFMPEG mux video and audio (from another video) – mapping issue<\/a> … thanks and thanks … to add audio to a video stream from two different sources.<\/p>\n

At least, with macOS MAMP there is the excellent command line “file”<\/a> we can use to show information about some potential input files you could use in this, so far, user unfriendly, “first draft” version of the PHP.<\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n