{"id":60249,"date":"2023-07-27T03:01:24","date_gmt":"2023-07-26T17:01:24","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=60249"},"modified":"2023-07-27T13:37:43","modified_gmt":"2023-07-27T03:37:43","slug":"animated-gif-creation-slide-specific-effects-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-creation-slide-specific-effects-tutorial\/","title":{"rendered":"Animated GIF Creation Slide Specific Effects Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated GIF Creation Slide Specific Effects Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/ksa.jpg\" title=\"Animated GIF Creation Slide Specific Effects Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Animated GIF Creation Slide Specific Effects Tutorial<\/p><\/div>\n<p>With our animated GIF creator, last referenced with <a title='Ffmpeg Shelling Peas Tutorial' href='#fspt'>Ffmpeg Shelling Peas Tutorial<\/a>, we wanted to nuance the way the ImageMagick and GD effects could operate &#8230;<\/p>\n<ul>\n<li>they being only applicable to the entire animated GIF output image &#8230; before today&#8217;s work which makes it so that &#8230;<\/li>\n<li>optionally they can be turned on or off for individual animated GIF slides<\/li>\n<\/ul>\n<p> &#8230; thereby allowing more flexibility for the user, we&#8217;re hoping.<\/p>\n<p>Feel free to try <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php---------------------------------------------------------------------------GETME'>our changed animated GIF creator<\/a> PHP <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php---------------------------------------------------------------------------GETME'>tutorial_to_animated_gif.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\">inhouse animated GIF creator<\/a> web application which now features the additional &#8220;slide blurb additional snippet&#8221; &#8230;<\/p>\n<blockquote><p>\nPlease note double click toggles the negation of any GD rotations etcetera for this slide only and will become pale yellow here when in negated status, and that a 4x click on first selection reverses logic to be only 2x click selections from then on for a pale orange slide textbox background.\n<\/p><\/blockquote>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-creation-slide-specific-effects-tutorial\/'>Animated GIF Creation Slide Specific Effects Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fspt'>Previous relevant <a target=_blank title='Ffmpeg Shelling Peas Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-shelling-peas-tutorial\/'>Ffmpeg Shelling Peas Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Ffmpeg Shelling Peas Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover_ffmpeg_shelling.jpg\" title=\"Ffmpeg Shelling Peas Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Ffmpeg Shelling Peas Tutorial<\/p><\/div>\n<p>Well, our wish to &#8220;shell peas&#8221; setting up more <a style=vertical-align:top; target=_blank title=ffmpeg href='\/\/ffmpeg.org'>ffmpeg<\/a> media options based on the excellent <a target=_blank title='FFmpeg cheat sheet' href='\/\/gist.github.com\/steven2358\/ba153c642fe2bb1e47485962df07c730'>FFmpeg cheat sheet<\/a>, thanks, today, had its ups and downs for speed of progress, but, yes, to have a solid &#8220;framework&#8221; to work within, that you are happy with, barring those tweaks you inevitably discover in projects as they gain complexity, is the best first endeavour you might need to do, to feel more relaxed about the parts of the project requiring that third party expertise, which it is your job to test that you have successfully merged into the project.  And so, onto yesterday&#8217;s <a title='Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Linear Gradient Tutorial' href='#fpimpdlgt'>Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Linear Gradient Tutorial<\/a>, <font color=blue>we have included new<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$vssfi='img%03d.png';<br \/>\n$bn='*';<br \/>\n$bntwo='.*';<br \/>\n<br \/>\nforeach (glob('newfolder_*') as $idfilename) {<br \/>\n  if (file_exists($idfilename) && $vssfi == 'img%03d.png') {<br \/>\n    foreach (glob($idfilename . DIRECTORY_SEPARATOR . '*') as $idifilename) {<br \/>\n      if ($vssfi == 'img%03d.png' && strpos($idifilename, '.') !== false) {<br \/>\n        $bnis=basename($idifilename);<br \/>\n        $bn='';<br \/>\n        $bntwo='';<br \/>\n        for ($ibn=0; $ibn&lt;strlen(explode('.', $bnis)[0]); $ibn++) {<br \/>\n           if (substr(substr($bnis, $ibn),0,1) &gt;= '0' && substr(substr($bnis, $ibn),0,1) &lt;= '9') {<br \/>\n             if ($bntwo == '') {<br \/>\n               if (substr(substr($bnis, $ibn),0,1) == '0') {<br \/>\n                 $bntwo='%0' . strlen(substr(explode('.', $bnis)[0], $ibn)) . 'd' . '.' . explode('.', $idifilename)[-1 + sizeof(explode('.', $idifilename))];<br \/>\n               } else {<br \/>\n                 $bntwo='%d' . '.' . explode('.', $idifilename)[-1 + sizeof(explode('.', $idifilename))];<br \/>\n               }<br \/>\n             }<br \/>\n           } else if ($bntwo == '') {<br \/>\n             $bn.=substr(substr($bnis, $ibn),0,1);<br \/>\n           }<br \/>\n        }<br \/>\n        if ($bntwo == '') {<br \/>\n         $bn='*';<br \/>\n         $bntwo='.' . explode('.', $idifilename)[-1 + sizeof(explode('.', $idifilename))];<br \/>\n        }<br \/>\n        $vssfi=$idfilename . substr(DIRECTORY_SEPARATOR . DIRECTORY_SEPARATOR,0,1) . $bn . $bntwo;<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  var ffstr='  Concat demuxer,  Display the frame number on each frame,<font color=blue>  Trimming,  Delay video,  Delay audio,  Extract a frame per second,  Extract the frames from a video,  Mute some of the audio,  Extract one frame,  Create a video slideshow from images,<\/font>', offstr=null, kffstr=0, affstr=[];<br \/>\n<br \/>\n    \/\/<br \/>\n    \/\/ And then ... later ...<br \/>\n    \/\/<br \/>\n    if (newv == 'Trimming') {<br \/>\n<br \/> <br \/>\n       document.getElementById('moreb').innerHTML=firstdivih;<br \/>\n<br \/>\n       document.getElementById('precmds').innerHTML=' ';<br \/>\n       document.getElementById('secondi').innerHTML='';<br \/>\n       document.getElementById('minusi').innerHTML=' -ss 00:00:00.000 -i ';<br \/>\n       document.getElementById('minusi').title='Start time';<br \/>\n<br \/>\n       document.getElementById('sswitches').innerHTML='-t 60 -c copy ';<br \/>\n       document.getElementById('sswitches').title='Duration';<br \/>\n<br \/>\n       document.getElementById('mysub').value=newv;<br \/>\n    } else if (newv == 'Delay video') {<br \/>\n<br \/>\n       document.getElementById('moreb').innerHTML=firstdivih;<br \/>\n       document.getElementById('precmds').innerHTML=' ';<br \/>\n<br \/>\n       document.getElementById('betweenis').innerHTML='-itsoffset 1.00';<br \/>\n       document.getElementById('betweenis').title='Delay in seconds';<br \/>\n<br \/>\n       document.getElementById('sswitches').innerHTML='-map 1:v -map 0:a &lt;span id=svac contenteditable=false&gt;-vcodec copy -acodec copy &lt;\/span&gt;';<br \/>\n       document.getElementById('sswitches').title='The 1:v 0:a represents video track else use 0:v 1:a for audio track';<br \/>\n<br \/>\n       document.getElementById('mysub').value=newv;<br \/>\n    } else if (newv == 'Delay audio') {<br \/>\n<br \/>\n       document.getElementById('moreb').innerHTML=firstdivih;<br \/>\n       document.getElementById('precmds').innerHTML=' ';<br \/>\n<br \/>\n       document.getElementById('betweenis').innerHTML='-itsoffset 1.00';<br \/>\n       document.getElementById('betweenis').title='Delay in seconds';<br \/>\n<br \/>\n       document.getElementById('sswitches').innerHTML='-map 0:v -map 1:a &lt;span id=svac contenteditable=false&gt;-vcodec copy -acodec copy &lt;\/span&gt;';<br \/>\n       document.getElementById('sswitches').title='The 0:v 1:a represents audio track else use 1:v 0:a for video track';<br \/>\n<br \/>\n       document.getElementById('mysub').value=newv;<br \/>\n    } else if (newv == 'Extract a frame per second') {<br \/>\n<br \/>\n       document.getElementById('moreb').innerHTML=firstdivih.replace(' out.mp4',' ');<br \/>\n       document.getElementById('precmds').innerHTML=' ';<br \/>\n       document.getElementById('secondi').innerHTML='-filter:v fps=fps=1 -vsync 0';<br \/>\n       document.getElementById('secondi').title='The 1 represents 1 per second';<br \/>\n       document.getElementById('sswitches').innerHTML=\\\"&lt;span id=sfolder contenteditable=false&gt;newfolder_\" . rand(0,784534) . str_replace(\"\\\\\",\"\\\\\\\\\",$ddn) . \"out%d.png\\\" + '&lt;\/span&gt;';<br \/>\n<br \/>\n       document.getElementById('mysub').value=newv;<br \/>\n    } else if (newv == 'Extract the frames from a video') {<br \/>\n<br \/>\n       document.getElementById('moreb').innerHTML=firstdivih.replace(' out.mp4',' ');<br \/>\n       document.getElementById('precmds').innerHTML=' ';<br \/>\n       document.getElementById('secondi').innerHTML=\\\"-vf \\\" + String.fromCharCode(34) + \\\"select='between(t,1,5)+between(t,11,15)'\\\" + String.fromCharCode(34) + \\\" -vsync 0\\\";<br \/>\n       document.getElementById('secondi').title='To extract all frames from between 1 and 5 seconds, and also between 11 and 15 seconds';<br \/>\n       document.getElementById('sswitches').innerHTML=\\\"&lt;span id=sfolder contenteditable=false&gt;newfolder_\" . rand(0,784534) . str_replace(\"\\\\\",\"\\\\\\\\\",$ddn) . \"out%d.png\\\" + '&lt;\/span&gt;';<br \/>\n<br \/>\n       document.getElementById('mysub').value=newv;<br \/>\n    } else if (newv == 'Mute some of the audio') {<br \/>\n<br \/>\n       document.getElementById('moreb').innerHTML=firstdivih;<br \/>\n       document.getElementById('secondi').innerHTML='';<br \/>\n       document.getElementById('precmds').innerHTML=' ';<br \/>\n<br \/>\n       document.getElementById('sswitches').innerHTML=\\\"-vcodec copy -af \\\" + String.fromCharCode(34) + \\\"volume=enable='between(t,80,90)'&lt;span id=svolume contenteditable=false&gt;:volume=0\\\" + String.fromCharCode(34) + \\\" &lt;\/span&gt;\\\";<br \/>\n       document.getElementById('sswitches').title='To replace all audio between 1:20 and 1:30 with silence';<br \/>\n<br \/>\n       document.getElementById('mysub').value=newv;<br \/>\n    } else if (newv == 'Create a video slideshow from images') {<br \/>\n<br \/>\n       document.getElementById('moreb').innerHTML=firstdivih;<br \/>\n<br \/>\n       document.getElementById('minusi').innerHTML='-r 1\/5 -i ';<br \/>\n       document.getElementById('minusi').title='Parameter -r marks the image framerate (inverse time of each image); -vf fps=25 marks the true framerate of the output';<br \/>\n<br \/>\n       document.getElementById('secondi').innerHTML='';<br \/>\n       document.getElementById('precmds').innerHTML=' ';<br \/>\n       document.getElementById('scbi').innerHTML='\" . $vssfi . \"';<br \/>\n<br \/>\n       document.getElementById('sswitches').innerHTML=' -c:v libx264 -vf fps=25&lt;span id=shat contenteditable=false&gt; -pix_fmt yuv420p &lt;\/span&gt;';<br \/>\n<br \/>\n       document.getElementById('mysub').value=newv;<br \/>\n    } else if (newv == 'Extract one frame') {<br \/>\n<br \/>\n       document.getElementById('moreb').innerHTML=firstdivih.replace(' out.mp4',' out.jpg');<br \/>\n       document.getElementById('secondi').innerHTML='';<br \/>\n       document.getElementById('precmds').innerHTML=' ';<br \/>\n<br \/>\n       document.getElementById('sswitches').innerHTML='-ss 00:00:10.000&lt;span id=svframes contenteditable=false&gt; -vframes 1 &lt;\/span&gt;';<br \/>\n       document.getElementById('sswitches').title='Extract one frame at 10 second mark';<br \/>\n<br \/>\n       document.getElementById('mysub').value=newv;<br \/>\n    }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; <a style=vertical-align:top; target=_blank title=ffmpeg href='\/\/ffmpeg.org'>ffmpeg<\/a> media functionality talents for you to try yourself, today, in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php---------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php---------------GETME\">voiceover.php<\/a> PHP (we&#8217;d want you to download to a local <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> Apache web server&#8217;s Document Root folder and which you can <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\">run that PHP there<\/a>).<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-ffmpeg-and-pandoc-and-imagemagick-and-pdfimages-dropdown-linear-gradient-tutorial\/'>New Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Linear Gradient Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fpimpdlgt'>Previous relevant <a target=_blank title='Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Linear Gradient Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-and-pandoc-and-imagemagick-and-pdfimages-dropdown-linear-gradient-tutorial\/'>Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Linear Gradient Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Linear Gradient Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover_linear_gradient_underlay.jpg\" title=\"Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Linear Gradient Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Linear Gradient Tutorial<\/p><\/div>\n<p>There were two weakness with the logic in yesterday&#8217;s <a title='Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Hover Swipe Tutorial' href='#fpimpdhst'>Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Hover Swipe Tutorial<\/a>, we reckon, those being &#8230;<\/p>\n<ol>\n<li>it is hard to &#8220;hover swipe&#8221; with no linework to show where one option starts and another ends, in Y (or top) co-ordinates &#8230; and &#8230;<\/li>\n<li>the user has trouble knowing whether their swipe attempt worked<\/li>\n<\/ol>\n<p> &#8230; for which we supply ideas &#8230;<\/p>\n<ol>\n<li>linear-gradient background, in the form of a colourful &#8220;underlay&#8221; div element under (now transparent background<sub>ed<\/sub>) select (ie. dropdown) element (and associated &#8220;overlay&#8221; div)  &#8230; and &#8230;<\/li>\n<li>emoji for swipe left &#11013; (&amp;#11013;) and for swipe right &#10145; (&amp;#10145;) shown briefly<\/li>\n<\/ol>\n<p> &#8230; featuring <font color=blue>relevant code<\/font> snippets &#8230;<\/p>\n<ol>\n<li>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  function overlay() {<br \/>\n   origval=document.getElementById('schoices').value;<br \/>\n   var rect=document.getElementById('fcommand').getBoundingClientRect();<br \/>\n   document.getElementById('moreb').style.position='absolute';<br \/>\n   document.getElementById('moreb').style.left='' + rect.left + 'px';<br \/>\n   document.getElementById('moreb').style.top='' + rect.top + 'px';<br \/>\n   document.getElementById('moreb').style.width='96%'; \/\/' + rect.width + 'px';<br \/>\n   document.getElementById('moreb').style.height='' + rect.height + 'px';<br \/>\n<br \/> <br \/>\n   document.getElementById('moreb').style.border='1px solid black';<br \/>\n   document.getElementById('moreb').style.paddingLeft='20px';<br \/>\n   document.getElementById('moreb').style.backgroundColor='#f9f9f9';<br \/>\n   document.getElementById('fcommand').style.opacity='0.0';<br \/>\n   document.getElementById('fcommand').style.cursor='pointer';<br \/>\n<br \/> <br \/>\n   document.getElementById('moreb').innerHTML='&lt;span id=precmds&gt;&lt;\/span&gt;&lt;span id=verb&gt;ffmpeg\" . $ffmpegsuf . \"&lt;\/span&gt; &lt;span id=prescbi&gt;&lt;\/span&gt;&lt;span id=minusi&gt; -i &lt;\/span&gt;&lt;span id=scbi&gt;&lt;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=69075964842271&left=y\\\"&gt;&lt;\/iframe&gt;&lt;\/span&gt; &lt;span id=betweenis&gt;&lt;\/span&gt; &lt;span id=secondi&gt;-i &lt;span id=scbix&gt;&lt;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=69075964842271&right=y\\\"&gt;&lt;\/iframe&gt;&lt;\/span&gt;&lt;\/span&gt; &lt;span id=sswitches&gt;-c copy -map 0:v:0 -map 1:a:0 -shortest&lt;\/span&gt; out.mp4 &gt; &lt;a target=_blank title=ffimpdf.bad onclick=getvb(); style=cursor:pointer;text-decoration:underline; data-href=.\/ffimpdf.bad&gt;ffimpdf.bad&lt;\/a&gt;';<br \/>\n   if (firstdivih == '') { firstdivih=document.getElementById('moreb').innerHTML; }<br \/>\n   if (firstbutval == '') { firstbutval=document.getElementById('mysub').value; }<br \/>\n   document.getElementById('schoices').style.display='inline-block';<br \/>\n<br \/> <br \/>\n   rect=document.getElementById('schoices').getBoundingClientRect();<br \/>\n<br \/> <br \/>\n   if (eval('' + rect.height) &gt; 100 || 1 == 1) {<br \/>\n<br \/> <br \/>\n   <font color=blue>document.getElementById('schoices').style.backgroundColor='transparent';<br \/>\n   document.getElementById('tf').style.position='absolute'; \/\/ using new &lt;div id=tf&gt;&lt;\/div&gt;<br \/>\n   document.getElementById('tf').style.left='' + rect.left + 'px';<br \/>\n   document.getElementById('tf').style.top='' + rect.top + 'px';<br \/>\n   document.getElementById('tf').style.width='' + rect.width + 'px';<br \/>\n   document.getElementById('tf').style.height='' + rect.height + 'px';<br \/>\n   \/\/ Thanks to <a target=_blank title='https:\/\/stackoverflow.com\/questions\/49660659\/css-gradients-inside-gradients' href='https:\/\/stackoverflow.com\/questions\/49660659\/css-gradients-inside-gradients'>https:\/\/stackoverflow.com\/questions\/49660659\/css-gradients-inside-gradients<\/a><br \/>\n   document.getElementById('tf').style.background='linear-gradient(0deg, #ffffff 10%, rgba(255,255,0,0.6) 20%, rgba(192,192,192,0.6) 31%, rgba(255,215,0,0.6) 42%, rgba(211,211,211,0.6) 53%, rgba(255,165,0,0.6) 63%, rgba(224,255,255,0.6) 74%, rgba(254,254,254,0.6) 85%, #CC7722 100%), linear-gradient( to right, yellow, pink )'; \/\/ #fcfafc #f9f6f8 #f8f1f3<br \/>\n   document.getElementById('tf').style.zIndex='-1';<\/font><br \/>\n<br \/>\n   document.getElementById('doverlay').style.position='absolute';<br \/>\n   document.getElementById('doverlay').style.left='' + rect.left + 'px';<br \/>\n   document.getElementById('doverlay').style.top='' + rect.top + 'px';<br \/>\n   document.getElementById('doverlay').style.width='' + rect.width + 'px';<br \/>\n   if (eval('' + rect.height) &lt; 30) {<br \/>\n   document.getElementById('doverlay').style.height='' + rect.height + 'px';<br \/>\n   } else {<br \/>\n   document.getElementById('doverlay').style.height='' + eval(eval('' + rect.height) \/ eval('' + document.getElementById('schoices').size)) + 'px';<br \/>\n   }<br \/>\n   document.getElementById('doverlay').style.zIndex='96';<br \/>\n   document.getElementById('doverlay').style.textAlign='center';<br \/>\n   document.getElementById('doverlay').style.display='block';<br \/>\n   document.getElementById('doverlay').title=document.getElementById('mydefopt').title;<br \/>\n   \/\/document.getElementById('mydefopt').style.fontColor='transparent';<br \/>\n   document.getElementById('mydefopt').innerHTML='';<br \/>\n<br \/> <br \/>\n   document.getElementById('doverlaytwo').style.position='absolute';<br \/>\n   document.getElementById('doverlaytwo').style.left='' + rect.left + 'px';<br \/>\n   \/\/document.getElementById('doverlaytwo').style.top='' + eval(eval('' + rect.height) - eval(2 * eval('' + rect.height) \/ eval('' + document.getElementById('schoices').size))) + 'px';<br \/>\n   document.getElementById('doverlaytwo').style.top='' + eval(eval('' + rect.height) - eval(0.5 * eval('' + rect.height) \/ eval('' + document.getElementById('schoices').size))) + 'px';<br \/>\n   \/\/document.getElementById('doverlaytwo').style.bottom='' + rect.bottom + 'px';<br \/>\n   document.getElementById('doverlaytwo').style.width='' + rect.width + 'px';<br \/>\n   if (eval('' + rect.height) &lt; 30) {<br \/>\n   if (1 == 2) { document.getElementById('doverlaytwo').style.height='' + rect.height + 'px'; }<br \/>\n   } else {<br \/>\n   document.getElementById('doverlaytwo').style.height='' + eval(eval('' + rect.height) \/ eval('' + document.getElementById('schoices').size)) + 'px';<br \/>\n   }<br \/>\n   document.getElementById('doverlaytwo').style.zIndex='96';<br \/>\n   document.getElementById('doverlaytwo').style.textAlign='center';<br \/>\n   document.getElementById('doverlaytwo').style.display='block';<br \/>\n   document.getElementById('mydefopttwo').innerHTML='';<br \/>\n<br \/>\n   rect=document.getElementById('mysub').getBoundingClientRect();<br \/>\n   document.getElementById('mysub').style.position='absolute';<br \/>\n   document.getElementById('mysub').style.left='' + rect.left + 'px';<br \/>\n   document.getElementById('mysub').style.top='' + rect.top + 'px';<br \/>\n<br \/>\n   setInterval(fhoc, 1000);<br \/>\n   }<br \/>\n<br \/> <br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<br \/>\n &#8230; using a multiple linear-gradient element style background for the first time we can remember\n<\/li>\n<li>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  <font color=blue>var swipel='', swipelcp='', swiper='', swipercp='';<br \/>\n<br \/>\n  var ra='&amp;#10145;', racp=String.fromCodePoint(10145);<br \/>\n  var la='&amp;#11013;', lacp=String.fromCodePoint(11013);<\/font><br \/>\n<br \/>\n  function isplace(thiso, e) {<br \/>\n    var kkk=0;<br \/>\n    e = e || window.event;<br \/>\n    e.preventDefault();<br \/>\n       if (e.touches) {<br \/>\n       if (e.touches[0].pageX) {<br \/>\n       pos3 = e.touches[0].pageX;<br \/>\n       pos4 = e.touches[0].pageY;<br \/>\n       } else {<br \/>\n       pos3 = e.touches[0].clientX;<br \/>\n       pos4 = e.touches[0].clientY;<br \/>\n       }<br \/>\n       \/\/console.log('pos3=' + pos3 + ',pos4=' + pos4);<br \/>\n       } else if (e.clientX || e.clientY) {<br \/>\n        pos3 = e.clientX;<br \/>\n        pos4 = e.clientY;<br \/>\n       } else {<br \/>\n        pos3 = e.pageX;<br \/>\n        pos4 = e.pageY;<br \/>\n       }<br \/>\n       if (lasto == e.target) {<br \/>\n        if (Math.abs(pos1 - pos3) &gt;= 70) {<br \/>\n          if (pos3 &gt; pos1) { \/\/ swipe right<br \/>\n            <font color=blue>swiper=ra;<br \/>\n            swipercp=racp;<\/font><br \/>\n            if (e.target == opastr) {<br \/>\n              kkk=eval(1 + eval('' + kpastr));<br \/>\n              if (kkk &gt;= eval('' + apastr.length)) {<br \/>\n                kpastr=eval('' + kpastr);<br \/>\n              } else {<br \/>\n                kpastr=kkk;<br \/>\n              }<br \/>\n            } else if (e.target == opdstr) {<br \/>\n              kkk=eval(1 + eval('' + kpdstr));<br \/>\n              if (kkk &gt;= eval('' + apdstr.length)) {<br \/>\n                kpdstr=eval('' + kpdstr);<br \/>\n              } else {<br \/>\n                kpdstr=kkk;<br \/>\n              }<br \/>\n            } else if (e.target == oimstr) {<br \/>\n              kkk=eval(1 + eval('' + kimstr));<br \/>\n              if (kkk &gt;= eval('' + aimstr.length)) {<br \/>\n                kimstr-=eval('' + kimstr);<br \/>\n              } else {<br \/>\n                kimstr=kkk;<br \/>\n              }<br \/>\n            } else if (e.target == offstr) {<br \/>\n              kkk=eval(1 + eval('' + kffstr));<br \/>\n              if (kkk &gt;= eval('' + affstr.length)) {<br \/>\n                kffstr-=eval('' + kffstr);<br \/>\n              } else {<br \/>\n                kffstr=kkk;<br \/>\n              }<br \/>\n            }<br \/>\n          } else { \/\/ swipe left<br \/>\n            <font color=blue>swipel=la;<br \/>\n            swipelcp=lacp;<\/font><br \/>\n            if (e.target == opastr) {<br \/>\n              kkk=eval(-1 + eval('' + kpastr));<br \/>\n              if (kkk &lt; 0) {<br \/>\n                kpastr=eval(-1 + eval('' + apastr.length));<br \/>\n              } else {<br \/>\n                kpastr=kkk;<br \/>\n              }<br \/>\n            } else if (e.target == opdstr) {<br \/>\n              kkk=eval(-1 + eval('' + kpdstr));<br \/>\n              if (kkk &lt; 0) {<br \/>\n                kpdstr=eval(-1 + eval('' + apdstr.length));<br \/>\n              } else {<br \/>\n                kpdstr=kkk;<br \/>\n              }<br \/>\n            } else if (e.target == oimstr) {<br \/>\n              kkk=eval(-1 + eval('' + kimstr));<br \/>\n              if (kkk &lt; 0) {<br \/>\n                kimstr=eval(-1 + eval('' + aimstr.length));<br \/>\n              } else {<br \/>\n                kimstr=kkk;<br \/>\n              }<br \/>\n            } else if (e.target == offstr) {<br \/>\n              kkk=eval(-1 + eval('' + kffstr));<br \/>\n              if (kkk &lt; 0) {<br \/>\n                kffstr=eval(-1 + eval('' + affstr.length));<br \/>\n              } else {<br \/>\n                kffstr=kkk;<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n        }<br \/>\n        \/\/alert('swipe distance = ' + Math.abs(pos1 - pos3));<br \/>\n       }<br \/>\n       lasto=e.target;<br \/>\n  }<br \/>\n<br \/>\n  function betweeneatatjoes() {<br \/>\n     var origt='', origrest='', kkprefix=<font color=blue>swipelcp + <\/font>'...', kksuffix='...'<font color=blue> + swipercp<\/font>;<br \/>\n     <font color=blue>var origkkprefix='', origkksuffix='', origkprefix='', origksuffix='';<\/font><br \/>\n     if (kprefix == '' && ksuffix == '') {<br \/>\n       kprefix=<font color=blue>swipel + <\/font>'&amp;#128309;..';<br \/>\n       kkprefix=<font color=blue>swipelcp + <\/font>String.fromCodePoint(128309) + '..';<br \/>\n       ksuffix='...'<font color=blue> + swiper<\/font>;<br \/>\n       \/\/document.getElementById('doverlaytwo').style.marginTop='20px';<br \/>\n     } else if (kprefix == <font color=blue>swipel + <\/font>'&amp;#128309;..') {<br \/>\n       kprefix=<font color=blue>swipel + <\/font>'.&amp;#128309;.';<br \/>\n       kkprefix=<font color=blue>swipelcp +'.' + <\/font>String.fromCodePoint(128309) + '.';<br \/>\n       ksuffix='...'<font color=blue> + swiper<\/font>;<br \/>\n     } else if (kprefix == <font color=blue>swipel + <\/font>'.&amp;#128309;.') {<br \/>\n       kprefix=<font color=blue>swipel + <\/font>'..&amp;#128309;';<br \/>\n       kkprefix=<font color=blue>swipelcp + <\/font>'..' + String.fromCodePoint(128309) + '';<br \/>\n       ksuffix='...'<font color=blue> + swiper<\/font>;<br \/>\n     } else if (kprefix == <font color=blue>swipel + <\/font>'..&amp;#128309;') {<br \/>\n       ksuffix='&amp;#128309;..'<font color=blue> + swiper<\/font>;<br \/>\n       kksuffix=String.fromCodePoint(128309) + '..'<font color=blue> + swipercp<\/font>;<br \/>\n       kprefix=swipel + '...'<font color=blue> + swiper<\/font>;<br \/>\n     } else if (ksuffix == '&amp;#128309;..'<font color=blue> + swiper<\/font>) {<br \/>\n       ksuffix='.&amp;#128308;.'<font color=blue> + swiper<\/font>;<br \/>\n       kksuffix='.' + String.fromCodePoint(128308) + '.'<font color=blue> + swipercp<\/font>;<br \/>\n       kprefix=<font color=blue>swipel + <\/font>'...';<br \/>\n     } else if (ksuffix == '.&amp;#128308;.'<font color=blue> + swiper<\/font>) {<br \/>\n       ksuffix='..&amp;#128308;'<font color=blue> + swiper<\/font>;<br \/>\n       kksuffix='..' + String.fromCodePoint(128308) + ''<font color=blue> + swipercp<\/font>;<br \/>\n       kprefix=<font color=blue>swipel + <\/font>'...';<br \/>\n     } else {<br \/>\n       kprefix=<font color=blue>swipel + <\/font>'&amp;#917536;..';<br \/>\n       kkprefix=<font color=blue>swipelcp + <\/font>'..' + String.fromCodePoint(917536) + '..';<br \/>\n       ksuffix='...'<font color=blue> + swiper<\/font>;<br \/>\n       \/\/document.getElementById('doverlaytwo').style.marginTop='0px';<br \/>\n     }<br \/>\n<br \/> <br \/>\n     <font color=blue>origkkprefix=kkprefix;<br \/>\n     origkksuffix=kksuffix;<br \/>\n     origkprefix=kprefix;<br \/>\n     origksuffix=ksuffix;<\/font><br \/>\n<br \/> <br \/>\n     if (oimstr) {<br \/>\n       origt=oimstr.getAttribute('data-title');<br \/>\n       <font color=blue>if (lasto == oimstr) {<br \/>\n        kkprefix=origkkprefix;<br \/>\n        kksuffix=origkksuffix;<br \/>\n        kprefix=origkprefix;<br \/>\n        ksuffix=origksuffix;<br \/>\n       } else if (swipel + swiper != '') {<br \/>\n        kkprefix=origkkprefix.replace(swipelcp,'');<br \/>\n        kksuffix=origkksuffix.replace(swipercp,'');<br \/>\n        kprefix=origkprefix.replace(swipel,'');<br \/>\n        ksuffix=origksuffix.replace(swiper,'');<br \/>\n       }<\/font><br \/>\n       if (kimstr == 0) {<br \/>\n         oimstr.innerHTML='  ' + kprefix + aimstr[kimstr] + ksuffix;<br \/>\n         origrest=(origt.split('' + aimstr[kimstr])[1] + ',' + origt.split('' + aimstr[kimstr])[0]).trim().replace(\/\\,\\,\/g,'').replace('undefined','');<br \/>\n         oimstr.title=kkprefix + aimstr[kimstr] + kksuffix + origrest;<br \/>\n       } else {<br \/>\n         oimstr.innerHTML='  ' + kprefix + aimstr[eval(-1 + kimstr)] + ksuffix;<br \/>\n         origrest=(origt.split('' + aimstr[eval(-1 + kimstr)])[1] + ',' + origt.split('' + aimstr[eval(-1 + kimstr)])[0]).trim().replace(\/\\,\\,\/g,'').replace('undefined','');<br \/>\n         oimstr.title=kkprefix + aimstr[eval(-1 + kimstr)] + kksuffix + origrest;<br \/>\n       }<br \/>\n     }<br \/>\n     if (opdstr) {<br \/>\n       origt=opdstr.getAttribute('data-title');<br \/>\n       <font color=blue>if (lasto == opdstr) {<br \/>\n        kkprefix=origkkprefix;<br \/>\n        kksuffix=origkksuffix;<br \/>\n        kprefix=origkprefix;<br \/>\n        ksuffix=origksuffix;<br \/>\n       } else if (swipel + swiper != '') {<br \/>\n        kkprefix=origkkprefix.replace(swipelcp,'');<br \/>\n        kksuffix=origkksuffix.replace(swipercp,'');<br \/>\n        kprefix=origkprefix.replace(swipel,'');<br \/>\n        ksuffix=origksuffix.replace(swiper,'');<br \/>\n       }<\/font><br \/>\n       if (kpdstr == 0) {<br \/>\n         opdstr.innerHTML='  ' + kprefix + apdstr[kpdstr] + ksuffix;<br \/>\n         origrest=(origt.split('' + apdstr[kpdstr])[1] + ',' + origt.split('' + apdstr[kpdstr])[0]).trim().replace(\/\\,\\,\/g,'').replace('undefined','');<br \/>\n         opdstr.title=kkprefix + apdstr[kpdstr] + kksuffix + origrest;<br \/>\n       } else {<br \/>\n         opdstr.innerHTML='  ' + kprefix + apdstr[eval(-1 + kpdstr)] + ksuffix;<br \/>\n         origrest=(origt.split('' + apdstr[eval(-1 + kpdstr)])[1] + ',' + origt.split('' + apdstr[eval(-1 + kpdstr)])[0]).trim().replace(\/\\,\\,\/g,'').replace('undefined','');<br \/>\n         opdstr.title=kkprefix + apdstr[eval(-1 + kpdstr)] + kksuffix + origrest;<br \/>\n       }<br \/>\n     }<br \/>\n     if (opastr) {<br \/>\n       origt=opastr.getAttribute('data-title');<br \/>\n       <font color=blue>if (lasto == opastr) {<br \/>\n        kkprefix=origkkprefix;<br \/>\n        kksuffix=origkksuffix;<br \/>\n        kprefix=origkprefix;<br \/>\n        ksuffix=origksuffix;<br \/>\n       } else if (swipel + swiper != '') {<br \/>\n        kkprefix=origkkprefix.replace(swipelcp,'');<br \/>\n        kksuffix=origkksuffix.replace(swipercp,'');<br \/>\n        kprefix=origkprefix.replace(swipel,'');<br \/>\n        ksuffix=origksuffix.replace(swiper,'');<br \/>\n       }<\/font><br \/>\n       if (kpastr == 0) {<br \/>\n         opastr.innerHTML='  ' + kprefix + apastr[kpastr] + ksuffix;<br \/>\n         origrest=(origt.split('' + apastr[kpastr])[1] + ',' + origt.split('' + apastr[kpastr])[0]).trim().replace(\/\\,\\,\/g,'').replace('undefined','');<br \/>\n         opastr.title=kkprefix + apastr[kpastr] + kksuffix + origrest;<br \/>\n       } else {<br \/>\n         opastr.innerHTML='  ' + kprefix + apastr[eval(-1 + kpastr)] + ksuffix;<br \/>\n         origrest=(origt.split('' + apastr[eval(-1 + kpastr)])[1] + ',' + origt.split('' + apastr[eval(-1 + kpastr)])[0]).trim().replace(\/\\,\\,\/g,'').replace('undefined','');<br \/>\n         opastr.title=kkprefix + apastr[eval(-1 + kpastr)] + kksuffix + origrest;<br \/>\n       }<br \/>\n     }<br \/>\n     if (offstr) {<br \/>\n       origt=offstr.getAttribute('data-title');<br \/>\n       <font color=blue>if (lasto == offstr) {<br \/>\n        kkprefix=origkkprefix;<br \/>\n        kksuffix=origkksuffix;<br \/>\n        kprefix=origkprefix;<br \/>\n        ksuffix=origksuffix;<br \/>\n       } else if (swipel + swiper != '') {<br \/>\n        kkprefix=origkkprefix.replace(swipelcp,'');<br \/>\n        kksuffix=origkksuffix.replace(swipercp,'');<br \/>\n        kprefix=origkprefix.replace(swipel,'');<br \/>\n        ksuffix=origksuffix.replace(swiper,'');<br \/>\n       }<\/font><br \/>\n       if (kffstr == 0) {<br \/>\n         offstr.innerHTML='  ' + kprefix + affstr[kffstr] + ksuffix;<br \/>\n         origrest=(origt.split('' + affstr[kffstr])[1] + ',' + origt.split('' + affstr[kffstr])[0]).trim().replace(\/\\,\\,\/g,'').replace('undefined','');<br \/>\n         offstr.title=kkprefix + affstr[kffstr] + kksuffix + origrest;<br \/>\n       } else {<br \/>\n         offstr.innerHTML='  ' + kprefix + affstr[eval(-1 + kffstr)] + ksuffix;<br \/>\n         origrest=(origt.split('' + affstr[eval(-1 + kffstr)])[1] + ',' + origt.split('' + affstr[eval(-1 + kffstr)])[0]).trim().replace(\/\\,\\,\/g,'').replace('undefined','');<br \/>\n         offstr.title=kkprefix + affstr[eval(-1 + kffstr)] + kksuffix + origrest;<br \/>\n       }<br \/>\n     }<br \/>\n     kcnt++;<br \/>\n     <font color=blue>swipel='';<br \/>\n     swipelcp='';<br \/>\n     swiper='';<br \/>\n     swipercp='';<\/font><br \/>\n     if (kcnt &lt; 7) {  setTimeout(betweeneatatjoes, 1000); }<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;\n<\/li>\n<\/ol>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php--------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php--------------GETME\">voiceover.php<\/a> PHP (we&#8217;d want you to download to a local <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> Apache web server&#8217;s Document Root folder and which you can <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\">run that PHP there<\/a>).<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-and-pandoc-and-imagemagick-and-pdfimages-dropdown-linear-gradient-tutorial\/'>Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Linear Gradient Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fpimpdhst'>Previous relevant <a target=_blank title='Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Hover Swipe Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-and-pandoc-and-imagemagick-and-pdfimages-dropdown-hover-swipe-tutorial\/'>Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Hover Swipe Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Hover Swipe Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover_swipe.jpg\" title=\"Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Hover Swipe Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Hover Swipe Tutorial<\/p><\/div>\n<p>Some users are impatient, we grant you.  Maybe some don&#8217;t want to wait the whole time of an 8 second &#8220;Eat at Joes&#8221; rotation.  Well, we thought about this, and got an idea to extend yesterday&#8217;s <a title='Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Onhover Marquee Tutorial' href='#fpimpdomt'>Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Onhover Marquee Tutorial<\/a>&#8216;s non-mobile functionality via &#8230;<\/p>\n<ul>\n<li>dropdown option (with animation) element onmouseover (hover swipe <font size=1>(maybe)<\/font> in x,y) &#8230; call such as <i>oimstr.onmouseover=function(event) { wasplace(oimstr, event);  };<\/i> &#8230; uses &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  var pos1=0, pos2=0, pos3=0, pos4=0, lasto=null;<br \/>\n<br \/>\n  function wasplace(thiso, e) {<br \/>\n    e = e || window.event;<br \/>\n    e.preventDefault();<br \/>\n       if (e.touches) {<br \/>\n       if (e.touches[0].pageX) {<br \/>\n       pos1 = e.touches[0].pageX;<br \/>\n       pos2 = e.touches[0].pageY;<br \/>\n       } else {<br \/>\n       pos1 = e.touches[0].clientX;<br \/>\n       pos2 = e.touches[0].clientY;<br \/>\n       }<br \/>\n       \/\/console.log('pos3=' + pos3 + ',pos4=' + pos4);<br \/>\n       } else if (e.clientX || e.clientY) {<br \/>\n        pos1 = e.clientX;<br \/>\n        pos2 = e.clientY;<br \/>\n       } else {<br \/>\n        pos1 = e.pageX;<br \/>\n        pos2 = e.pageY;<br \/>\n       }<br \/>\n       lasto=e.target;<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<br \/>\n &#8230;and onmouseout (hover swipe out x,y) events &#8230; if delta<sup>x<\/sup> >= 70 &#8230; call such as <i>oimstr.onmouseout=function(event) { isplace(oimstr, event);  };<\/i> &#8230; uses &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  function isplace(thiso, e) {<br \/>\n    var kkk=0;<br \/>\n    e = e || window.event;<br \/>\n    e.preventDefault();<br \/>\n       if (e.touches) {<br \/>\n       if (e.touches[0].pageX) {<br \/>\n       pos3 = e.touches[0].pageX;<br \/>\n       pos4 = e.touches[0].pageY;<br \/>\n       } else {<br \/>\n       pos3 = e.touches[0].clientX;<br \/>\n       pos4 = e.touches[0].clientY;<br \/>\n       }<br \/>\n       \/\/console.log('pos3=' + pos3 + ',pos4=' + pos4);<br \/>\n       } else if (e.clientX || e.clientY) {<br \/>\n        pos3 = e.clientX;<br \/>\n        pos4 = e.clientY;<br \/>\n       } else {<br \/>\n        pos3 = e.pageX;<br \/>\n        pos4 = e.pageY;<br \/>\n       }<br \/>\n       if (lasto == e.target) {<br \/>\n        if (Math.abs(pos1 - pos3) >= 70) {<br \/>\n          if (pos3 &gt; pos1) { \/\/ swipe right<br \/>\n            if (e.target == opastr) {<br \/>\n              kkk=eval(1 + eval('' + kpastr));<br \/>\n              if (kkk &gt;= eval('' + apastr.length)) {<br \/>\n                kpastr=0;<br \/>\n              } else {<br \/>\n                kpastr=kkk;<br \/>\n              }<br \/>\n            } else if (e.target == opdstr) {<br \/>\n              kkk=eval(1 + eval('' + kpdstr));<br \/>\n              if (kkk &gt;= eval('' + apdstr.length)) {<br \/>\n                kpdstr=0;<br \/>\n              } else {<br \/>\n                kpdstr=kkk;<br \/>\n              }<br \/>\n            } else if (e.target == oimstr) {<br \/>\n              kkk=eval(1 + eval('' + kimstr));<br \/>\n              if (kkk &gt;= eval('' + aimstr.length)) {<br \/>\n                kimstr=0;<br \/>\n              } else {<br \/>\n                kimstr=kkk;<br \/>\n              }<br \/>\n            } else if (e.target == offstr) {<br \/>\n              kkk=eval(1 + eval('' + kffstr));<br \/>\n              if (kkk &gt;= eval('' + affstr.length)) {<br \/>\n                kffstr=0;<br \/>\n              } else {<br \/>\n                kffstr=kkk;<br \/>\n              }<br \/>\n            }<br \/>\n          } else { \/\/ swipe left<br \/>\n            if (e.target == opastr) {<br \/>\n              kkk=eval(-1 + eval('' + kpastr));<br \/>\n              if (kkk &lt; 0) {<br \/>\n                kpastr=eval(-1 + eval('' + apastr.length));<br \/>\n              } else {<br \/>\n                kpastr=kkk;<br \/>\n              }<br \/>\n            } else if (e.target == opdstr) {<br \/>\n              kkk=eval(-1 + eval('' + kpdstr));<br \/>\n              if (kkk &lt; 0) {<br \/>\n                kpdstr=eval(-1 + eval('' + apdstr.length));<br \/>\n              } else {<br \/>\n                kpdstr=kkk;<br \/>\n              }<br \/>\n            } else if (e.target == oimstr) {<br \/>\n              kkk=eval(-1 + eval('' + kimstr));<br \/>\n              if (kkk &lt; 0) {<br \/>\n                kimstr=eval(-1 + eval('' + aimstr.length));<br \/>\n              } else {<br \/>\n                kimstr=kkk;<br \/>\n              }<br \/>\n            } else if (e.target == offstr) {<br \/>\n              kkk=eval(-1 + eval('' + kffstr));<br \/>\n              if (kkk &lt; 0) {<br \/>\n                kffstr=eval(-1 + eval('' + affstr.length));<br \/>\n              } else {<br \/>\n                kffstr=kkk;<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n        }<br \/>\n        \/\/alert('swipe distance = ' + Math.abs(pos1 - pos3));<br \/>\n       }<br \/>\n       lasto=e.target;<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;\n<\/li>\n<li>class a swipe right (if delta<sup>x<\/sup> > 0) else swipe left &#8230; resulting in &#8230;<\/li>\n<li>immediately show next option innerText if swipe right and show previous option innerText if swipe left<\/li>\n<\/ul>\n<p> &#8230; for you to <font color=blue>try for yourself<\/font> &#8230;<\/p>\n<blockquote><p>\nMedia and document action items<font color=blue> &#8230; please note you can hover swipe right or left, accurately, and with panache, regarding animated options to speed up transitions between option values<\/font>\n<\/p><\/blockquote>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php-------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php-------------GETME\">voiceover.php<\/a> PHP (we&#8217;d want you to download to a local <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> Apache web server&#8217;s Document Root folder and which you can <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\">run that PHP there<\/a>).<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-and-pandoc-and-imagemagick-and-pdfimages-dropdown-hover-swipe-tutorial\/'>Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Hover Swipe Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fpimpdomt'>Previous relevant <a target=_blank title='Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Onhover Marquee Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-and-pandoc-and-imagemagick-and-pdfimages-dropdown-onhover-marquee-tutorial\/'>Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Onhover Marquee Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Onhover Marquee Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover_title_marquee.gif\" title=\"Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Onhover Marquee Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Onhover Marquee Tutorial<\/p><\/div>\n<p>The non-mobile platforms have that useful wooooorrrrllllddd, the &#8220;onhover wooooorrrrllllddd&#8221; <font size=1>(to be precise)<\/font> that can be a great partner for Javascript <a target=_blank title='Ajax information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Ajax_(programming)'>Ajax<\/a> methodologies.  This onhover (actually the &#8220;onmouseover&#8221;) event is also useful whereby as a user hovers over an HTML element, and that element&#8217;s <i>title<\/i> attribute has a value, then the user can see that value displayed.<\/p>\n<p>And though, with yesterday&#8217;s <a title='Ffmpeg and Pandoc and ImageMagick and Pdfimages Animated Emoji Tutorial' href='#fpimpaet'>Ffmpeg and Pandoc and ImageMagick and Pdfimages Animated Emoji Tutorial<\/a> work &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/new-ffmpeg-and-pandoc-and-imagemagick-and-pdfimages-animated-emoji-tutorial\/'><p>\nthough we&#8217;re not going &#8220;full marquee Eat at Joes&#8221;\n<\/p><\/blockquote>\n<p> &#8230; regarding the dropdown option innerText &#8220;look&#8221;, there is, for non-mobile, this &#8220;onhover wooooorrrrllllddd&#8221; we can use to try a form of <a target=_blank title='HTML marquee tag' href='https:\/\/www.w3schools.in\/html\/marquee-tag'>marquee<\/a> &#8220;look&#8221; there, <font color=blue>as per<\/font> &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  function betweeneatatjoes() {<br \/>\n     <font color=blue>var origt='', origrest='', kkprefix='...', kksuffix='...';<\/font><br \/>\n     if (kprefix == '' && ksuffix == '') {<br \/>\n       kprefix='&amp;#128309;..';<br \/>\n       <font color=blue>kkprefix=String.fromCodePoint(128309) + '..';<\/font><br \/>\n       ksuffix='...';<br \/>\n       \/\/document.getElementById('doverlaytwo').style.marginTop='20px';<br \/>\n     } else if (kprefix == '&amp;#128309;..') {<br \/>\n       kprefix='.&amp;#128309;.';<br \/>\n       <font color=blue>kkprefix='.' + String.fromCodePoint(128309) + '.';<\/font><br \/>\n       ksuffix='...';<br \/>\n     } else if (kprefix == '.&amp;#128309;.') {<br \/>\n       kprefix='..&amp;#128309;';<br \/>\n       <font color=blue>kkprefix='..' + String.fromCodePoint(128309) + '';<\/font><br \/>\n       ksuffix='...';<br \/>\n     } else if (kprefix == '..&amp;#128309;') {<br \/>\n       ksuffix='&amp;#128309;..';<br \/>\n       <font color=blue>kksuffix=String.fromCodePoint(128309) + '..';<\/font><br \/>\n       kprefix='...';<br \/>\n     } else if (ksuffix == '&amp;#128309;..') {<br \/>\n       ksuffix='.&amp;#12830<font color=blue>8<\/font>;.';<br \/>\n       <font color=blue>kksuffix='.' + String.fromCodePoint(128308) + '.';<\/font><br \/>\n       kprefix='...';<br \/>\n     } else if (ksuffix == '.&amp;#12830<font color=blue>8<\/font>;.') {<br \/>\n       ksuffix='..<font color=blue>&amp;#128308;<\/font>';<br \/>\n       <font color=blue>kksuffix='..' + String.fromCodePoint(128308) + '';<\/font><br \/>\n       kprefix='...';<br \/>\n     } else {<br \/>\n       kprefix='<font color=blue>&amp;#917536;<\/font>..';<br \/>\n       <font color=blue>kkprefix='..' + String.fromCodePoint(917536) + '..';<\/font><br \/>\n       ksuffix='...';<br \/>\n       \/\/document.getElementById('doverlaytwo').style.marginTop='0px';<br \/>\n     }<br \/>\n     if (oimstr) {<br \/>\n       <font color=blue>origt=oimstr.getAttribute('data-title');<\/font><br \/>\n       if (kimstr == 0) {<br \/>\n         oimstr.innerHTML='  ' + kprefix + aimstr[kimstr] + ksuffix;<br \/>\n         <font color=blue>origrest=(origt.split('' + aimstr[kimstr])[1] + ',' + origt.split('' + aimstr[kimstr])[0]).trim().replace(\/\\,\\,\/g,'').replace('undefined','');<br \/>\n         oimstr.title=kkprefix + aimstr[kimstr] + kksuffix + origrest;<\/font><br \/>\n       } else {<br \/>\n         oimstr.innerHTML='  ' + kprefix + aimstr[eval(-1 + kimstr)] + ksuffix;<br \/>\n         <font color=blue>origrest=(origt.split('' + aimstr[eval(-1 + kimstr)])[1] + ',' + origt.split('' + aimstr[eval(-1 + kimstr)])[0]).trim().replace(\/\\,\\,\/g,'').replace('undefined','');<br \/>\n         oimstr.title=kkprefix + aimstr[eval(-1 + kimstr)] + kksuffix + origrest;<\/font><br \/>\n       }<br \/>\n     }<br \/>\n     if (opdstr) {<br \/>\n       <font color=blue>origt=opdstr.getAttribute('data-title');<\/font><br \/>\n       if (kpdstr == 0) {<br \/>\n         opdstr.innerHTML='  ' + kprefix + apdstr[kpdstr] + ksuffix;<br \/>\n         <font color=blue>origrest=(origt.split('' + apdstr[kpdstr])[1] + ',' + origt.split('' + apdstr[kpdstr])[0]).trim().replace(\/\\,\\,\/g,'').replace('undefined','');<br \/>\n         opdstr.title=kkprefix + apdstr[kpdstr] + kksuffix + origrest;<\/font><br \/>\n       } else {<br \/>\n         opdstr.innerHTML='  ' + kprefix + apdstr[eval(-1 + kpdstr)] + ksuffix;<br \/>\n         <font color=blue>origrest=(origt.split('' + apdstr[eval(-1 + kpdstr)])[1] + ',' + origt.split('' + apdstr[eval(-1 + kpdstr)])[0]).trim().replace(\/\\,\\,\/g,'').replace('undefined','');<br \/>\n         opdstr.title=kkprefix + apdstr[eval(-1 + kpdstr)] + kksuffix + origrest;<\/font><br \/>\n       }<br \/>\n     }<br \/>\n     if (opastr) {<br \/>\n       <font color=blue>origt=opastr.getAttribute('data-title');<\/font><br \/>\n       if (kpastr == 0) {<br \/>\n         opastr.innerHTML='  ' + kprefix + apastr[kpastr] + ksuffix;<br \/>\n         <font color=blue>origrest=(origt.split('' + apastr[kpastr])[1] + ',' + origt.split('' + apastr[kpastr])[0]).trim().replace(\/\\,\\,\/g,'').replace('undefined','');<br \/>\n         opastr.title=kkprefix + apastr[kpastr] + kksuffix + origrest;<\/font><br \/>\n       } else {<br \/>\n         opastr.innerHTML='  ' + kprefix + apastr[eval(-1 + kpastr)] + ksuffix;<br \/>\n         <font color=blue>origrest=(origt.split('' + apastr[eval(-1 + kpastr)])[1] + ',' + origt.split('' + apastr[eval(-1 + kpastr)])[0]).trim().replace(\/\\,\\,\/g,'').replace('undefined','');<br \/>\n         opastr.title=kkprefix + apastr[eval(-1 + kpastr)] + kksuffix + origrest;<\/font><br \/>\n       }<br \/>\n     }<br \/>\n     if (offstr) {<br \/>\n       <font color=blue>origt=offstr.getAttribute('data-title');<\/font><br \/>\n       if (kffstr == 0) {<br \/>\n         offstr.innerHTML='  ' + kprefix + affstr[kffstr] + ksuffix;<br \/>\n         <font color=blue>origrest=(origt.split('' + affstr[kffstr])[1] + ',' + origt.split('' + affstr[kffstr])[0]).trim().replace(\/\\,\\,\/g,'').replace('undefined','');<br \/>\n         offstr.title=kkprefix + affstr[kffstr] + kksuffix + origrest;<\/font><br \/>\n       } else {<br \/>\n         offstr.innerHTML='  ' + kprefix + affstr[eval(-1 + kffstr)] + ksuffix;<br \/>\n         <font color=blue>origrest=(origt.split('' + affstr[eval(-1 + kffstr)])[1] + ',' + origt.split('' + affstr[eval(-1 + kffstr)])[0]).trim().replace(\/\\,\\,\/g,'').replace('undefined','');<br \/>\n         offstr.title=kkprefix + affstr[eval(-1 + kffstr)] + kksuffix + origrest;<\/font><br \/>\n       }<br \/>\n     }<br \/>\n     kcnt++;<br \/>\n     if (kcnt &lt; 7) {  setTimeout(betweeneatatjoes, 1000); }<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p>Proof positive that emojis are text, and can help provide a graphic display interest for a webpage.  As well, as a CSS means by which we stop &#8220;dropdown Y jitteriness&#8221;, we introduce the use of <font color=blue>an emoji<\/font> &#9898; (&amp;#9898; or &amp;#x26aa;) for most option element <a target=_blank title='Claytons ... the drink you are having when you are not having a drink ... and this CSS technique contributes to what we know of as an option element innerText area but is not there in the Javascript DOM (and we are happy about this, being kind of lazy).' href='https:\/\/www.youtube.com\/watch?v=3qf4yUMxnjw'><i>Clayton<\/i><\/a> innerText parts, always &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n  <font color=blue>option:not(.nonwhite)::before {<br \/>\n    content: '\\0026aa';<br \/>\n  }<\/font><br \/>\n<br \/>\n  #doverlay {<br \/>\n     background-color: #FFE7E9;<br \/>\n  }<br \/>\n<br \/> <br \/>\n  #doverlaytwo {<br \/>\n     background-color: #FFE7E9;<br \/>\n  }<br \/>\n<br \/> <br \/>\n  body {<br \/>\n    background-color: #FFFFEF;<br \/>\n  }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; with one more <font color=blue>media functionality<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n  var mlook=false, kcnt=0, kprefix='', ksuffix='';<br \/>\n  var imstr='  Images to PDF,  Images to GIF,', oimstr=null, kimstr=0, aimstr=[];<br \/>\n  var pdstr='  PDF to Images,  PDF to HTML,  PDF to XML,', opdstr=null, kpdstr=0, apdstr=[];<br \/>\n  var pastr='  Text to HTML,  Text to Rich Text,  Text to Word,', opastr=null, kpastr=0, apastr=[];<br \/>\n  var ffstr='  Concat demuxer,<font color=blue>  Display the frame number on each frame,<\/font>', offstr=null, kffstr=0, affstr=[];<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php------------GETME\">voiceover.php<\/a> PHP (we&#8217;d want you to download to a local <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> Apache web server&#8217;s Document Root folder and which you can <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\">run that PHP there<\/a>).<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-ffmpeg-and-pandoc-and-imagemagick-and-pdfimages-animated-emoji-tutorial\/'>Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Onhover Marquee Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fpimpaet'>Previous relevant <a target=_blank title='Ffmpeg and Pandoc and ImageMagick and Pdfimages Animated Emoji Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-and-pandoc-and-imagemagick-and-pdfimages-animated-emoji-tutorial\/'>Ffmpeg and Pandoc and ImageMagick and Pdfimages Animated Emoji Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Ffmpeg and Pandoc and ImageMagick and Pdfimages Animated Emoji Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover_eatatjoes_emoji.jpg\" title=\"Ffmpeg and Pandoc and ImageMagick and Pdfimages Animated Emoji Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Ffmpeg and Pandoc and ImageMagick and Pdfimages Animated Emoji Tutorial<\/p><\/div>\n<p>The &#8220;dropdown animations&#8221; introduced into yesterday&#8217;s <a title='Ffmpeg and Pandoc and ImageMagick and Pdfimages Animated Dropdown Tutorial' href='#fpimpadt'>Ffmpeg and Pandoc and ImageMagick and Pdfimages Animated Dropdown Tutorial<\/a> were a tad subtle, it only involving &#8230;<\/p>\n<ul>\n<li>the wording of option elements within the dropdown &#8230; and though we&#8217;re not going &#8220;full marquee Eat at Joes&#8221; we are accentuating &#8220;midway&#8221;, today, by &#8230;<\/li>\n<li>adding emoji &#128309; (&amp;#128309;) movement to the animation for interest sake, as well as being informative (in that the user can anticipate when the new innerText text will arrive, as the emoji moves from left to right)<\/li>\n<\/ul>\n<p> &#8230; that we team with <font color=blue>more instances<\/font> of multiple animation settings &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  var mlook=false, kcnt=0, kprefix='', ksuffix='';<br \/>\n  var imstr='  Images to PDF,  <font color=blue>Images to GIF,<\/font>', oimstr=null, kimstr=0, aimstr=[];<br \/>\n  var pdstr='  PDF to Images,  <font color=blue>PDF to HTML,  PDF to XML,<\/font>', opdstr=null, kpdstr=0, apdstr=[];<br \/>\n  var pastr='  Text to HTML,  Text to Rich Text,<font color=blue>  Text to Word,<\/font>', opastr=null, kpastr=0, apastr=[];<br \/>\n  var ffstr='  Concat demuxer,  ', offstr=null, kffstr=0, affstr=[];<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; and a <font color=blue>new &#8220;between the 8 second setInterval wording refreshes&#8221; Javascript function<\/font> &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  <font color=blue>function betweeneatatjoes() {<br \/>\n     if (kprefix == '' && ksuffix == '') {<br \/>\n       kprefix='&amp;#128309;..';<br \/>\n       ksuffix='...';<br \/>\n       document.getElementById('doverlaytwo').style.marginTop='20px';<br \/>\n     } else if (kprefix == '&amp;#128309;..') {<br \/>\n       kprefix='.&amp;#128309;.';<br \/>\n       ksuffix='...';<br \/>\n     } else if (kprefix == '.&amp;#128309;.') {<br \/>\n       kprefix='..&amp;#128309;';<br \/>\n       ksuffix='...';<br \/>\n     } else if (kprefix == '..&amp;#128309;') {<br \/>\n       ksuffix='&amp;#128309;..';<br \/>\n       kprefix='...';<br \/>\n     } else if (ksuffix == '&amp;#128309;..') {<br \/>\n       ksuffix='.&amp;#128309;.';<br \/>\n       kprefix='...';<br \/>\n     } else if (ksuffix == '.&amp;#128309;.') {<br \/>\n       ksuffix='..&amp;#128309;';<br \/>\n       kprefix='...';<br \/>\n     } else {<br \/>\n       kprefix='...';<br \/>\n       ksuffix='...';<br \/>\n       document.getElementById('doverlaytwo').style.marginTop='0px';<br \/>\n     }<br \/>\n     if (oimstr) {<br \/>\n       if (kimstr == 0) {<br \/>\n         oimstr.innerHTML='  ' + kprefix + aimstr[kimstr] + ksuffix;<br \/>\n       } else {<br \/>\n         oimstr.innerHTML='  ' + kprefix + aimstr[eval(-1 + kimstr)] + ksuffix;<br \/>\n       }<br \/>\n     }<br \/>\n     if (opdstr) {<br \/>\n       if (kpdstr == 0) {<br \/>\n         opdstr.innerHTML='  ' + kprefix + apdstr[kpdstr] + ksuffix;<br \/>\n       } else {<br \/>\n         opdstr.innerHTML='  ' + kprefix + apdstr[eval(-1 + kpdstr)] + ksuffix;<br \/>\n       }<br \/>\n     }<br \/>\n     if (opastr) {<br \/>\n       if (kpastr == 0) {<br \/>\n         opastr.innerHTML='  ' + kprefix + apastr[kpastr] + ksuffix;<br \/>\n       } else {<br \/>\n         opastr.innerHTML='  ' + kprefix + apastr[eval(-1 + kpastr)] + ksuffix;<br \/>\n       }<br \/>\n     }<br \/>\n     if (offstr) {<br \/>\n       if (kffstr == 0) {<br \/>\n         offstr.innerHTML='  ' + kprefix + affstr[kffstr] + ksuffix;<br \/>\n       } else {<br \/>\n         offstr.innerHTML='  ' + kprefix + affstr[kffstr] + ksuffix;<br \/>\n       }<br \/>\n     }<br \/>\n     kcnt++;<br \/>\n     if (kcnt &lt; 7) {  setTimeout(betweeneatatjoes, 1000); }<br \/>\n  }<\/font><br \/>\n<br \/> <br \/>\n  function eatatjoes() {<br \/>\n     <font color=purple>kcnt=0;<br \/>\n     kprefix='';<br \/>\n     ksuffix='';<br \/>\n     document.getElementById('doverlaytwo').style.marginTop='0px';<\/font><br \/>\n     if (oimstr) {<br \/>\n       if (kimstr &gt;= eval('' + aimstr.length)) {<br \/>\n         kimstr=0;<br \/>\n         oimstr.innerHTML='  ' + aimstr[kimstr];<br \/>\n       } else {<br \/>\n         oimstr.innerHTML='  ' + aimstr[kimstr];<br \/>\n         kimstr++;<br \/>\n       }<br \/>\n     }<br \/>\n     if (opdstr) {<br \/>\n       if (kpdstr &gt;= eval('' + apdstr.length)) {<br \/>\n         kpdstr=0;<br \/>\n         opdstr.innerHTML='  ' + apdstr[kpdstr];<br \/>\n       } else {<br \/>\n         opdstr.innerHTML='  ' + apdstr[kpdstr];<br \/>\n         kpdstr++;<br \/>\n       }<br \/>\n     }<br \/>\n     if (opastr) {<br \/>\n       \/\/alert(apastr.length);<br \/>\n       if (kpastr &gt;= eval('' + apastr.length)) {<br \/>\n         kpastr=0;<br \/>\n         opastr.innerHTML='  ' + apastr[kpastr];<br \/>\n       } else {<br \/>\n         opastr.innerHTML='  ' + apastr[kpastr];<br \/>\n         kpastr++;<br \/>\n       }<br \/>\n     }<br \/>\n     if (offstr) {<br \/>\n       if (kffstr &gt;= eval('' + affstr.length)) {<br \/>\n         kffstr=0;<br \/>\n         offstr.innerHTML='  ' + affstr[kffstr];<br \/>\n       } else {<br \/>\n         offstr.innerHTML='  ' + affstr[kffstr];<br \/>\n         kffstr++;<br \/>\n       }<br \/>\n     }<br \/>\n     <font color=purple>setTimeout(betweeneatatjoes, 1000);<\/font><br \/>\n  }<br \/>\n<br \/> <br \/>\n  <font color=cyan>function andthen(iidea) {<\/font><br \/>\n     var outidea=iidea;<br \/>\n     var fndpos=-1;<br \/>\n     var optsare=document.getElementsByTagName('option'), ioptsare=0;<br \/>\n     var iimstr=(imstr.indexOf(',') == -1 ? -1 : outidea.indexOf(imstr.split(',')[0].trim() + ','));<br \/>\n     mlook=false;<br \/>\n     if (iimstr != -1) {<br \/>\n        if ((imstr.split(',')[0].trim() + ',') != imstr.trim()) {<br \/>\n          if (document.getElementById('oimagemagick')) {<br \/>\n             oimstr=document.getElementById('oimagemagick');<br \/>\n             mlook=true;<br \/>\n             aimstr=imstr.trim().replace(\/\\,\\ \\ \/g,',').replace(\/\\,\\ \/g,',').replace(\/\\,$\/g,'').split(',');<br \/>\n          } else {<br \/>\n             for (ioptsare=0; ioptsare&lt;optsare.length; ioptsare++) {<br \/>\n                if (optsare[ioptsare].value == imstr.split(',')[0].trim()) {<br \/>\n                  oimstr=optsare[ioptsare];<br \/>\n                  mlook=true;<br \/>\n                  aimstr=imstr.trim().replace(\/\\,\\ \\ \/g,',').replace(\/\\,\\ \/g,',').replace(\/\\,$\/g,'').split(',');<br \/>\n                }<br \/>\n             }<br \/>\n          }<br \/>\n          outidea=outidea.replace(imstr.split(',')[0].trim(), imstr.split(',')[0].trim() + '' + (imstr.replace(imstr.split(',')[0],'').trim() + ',').replace(',,',',').replace(\/\\,$\/g,''));<br \/>\n        }<br \/>\n     }<br \/>\n     var ipdstr=(pdstr.indexOf(',') == -1 ? -1 : outidea.indexOf(pdstr.split(',')[0].trim() + ','));<br \/>\n     if (ipdstr != -1) {<br \/>\n        if ((pdstr.split(',')[0].trim() + ',') != pdstr.trim()) {<br \/>\n          if (document.getElementById('opdfimages')) {<br \/>\n             opdstr=document.getElementById('opdfimages');<br \/>\n             mlook=true;<br \/>\n             apdstr=pdstr.trim().replace(\/\\,\\ \\ \/g,',').replace(\/\\,\\ \/g,',').replace(\/\\,$\/g,'').split(',');<br \/>\n          } else {<br \/>\n             for (ioptsare=0; ioptsare&lt;optsare.length; ioptsare++) {<br \/>\n                if (optsare[ioptsare].value == pdstr.split(',')[0].trim()) {<br \/>\n                  opdstr=optsare[ioptsare];<br \/>\n                  mlook=true;<br \/>\n                  apdstr=pdstr.trim().replace(\/\\,\\ \\ \/g,',').replace(\/\\,\\ \/g,',').replace(\/\\,$\/g,'').split(',');<br \/>\n                }<br \/>\n             }<br \/>\n          }<br \/>\n          outidea=outidea.replace(pdstr.split(',')[0].trim(), pdstr.split(',')[0].trim() + '' + (pdstr.replace(imstr.split(',')[0],'').trim() + ',').replace(',,',',').replace(\/\\,$\/g,''));<br \/>\n        }<br \/>\n     }<br \/>\n     var ipastr=(pastr.indexOf(',') == -1 ? -1 : outidea.indexOf(pastr.split(',')[0].trim() + ','));<br \/>\n     if (ipastr != -1) {<br \/>\n        if ((pastr.split(',')[0].trim() + ',') != pastr.trim()) {<br \/>\n          if (document.getElementById('opandoc')) {<br \/>\n             opastr=document.getElementById('opandoc');<br \/>\n             mlook=true;<br \/>\n             apastr=pastr.trim().replace(\/\\,\\ \\ \/g,',').replace(\/\\,\\ \/g,',').replace(\/\\,$\/g,'').split(',');<br \/>\n          } else {<br \/>\n             for (ioptsare=0; ioptsare&lt;optsare.length; ioptsare++) {<br \/>\n                if (optsare[ioptsare].value == pastr.split(',')[0].trim()) {<br \/>\n                  opastr=optsare[ioptsare];<br \/>\n                  mlook=true;<br \/>\n                  apastr=pastr.trim().replace(\/\\,\\ \\ \/g,',').replace(\/\\,\\ \/g,',').replace(\/\\,$\/g,'').split(',');<br \/>\n                }<br \/>\n             }<br \/>\n          }<br \/>\n          outidea=outidea.replace(pastr.split(',')[0].trim(), pastr.split(',')[0].trim() + '' + (pastr.replace(imstr.split(',')[0],'').trim() + ',').replace(',,',',').replace(\/\\,$\/g,''));<br \/>\n        }<br \/>\n     }<br \/>\n     var iffstr=(ffstr.indexOf(',') == -1 ? -1 : outidea.indexOf(ffstr.split(',')[0].trim() + ','));<br \/>\n     if (iffstr != -1) {<br \/>\n        if ((ffstr.split(',')[0].trim() + ',') != ffstr.trim()) {<br \/>\n          if (document.getElementById('offmpeg')) {<br \/>\n             offstr=document.getElementById('offmpeg');<br \/>\n             mlook=true;<br \/>\n             affstr=ffstr.trim().replace(\/\\,\\ \\ \/g,',').replace(\/\\,\\ \/g,',').replace(\/\\,$\/g,'').split(',');<br \/>\n          } else {<br \/>\n             for (ioptsare=0; ioptsare&lt;optsare.length; ioptsare++) {<br \/>\n                if (optsare[ioptsare].value == ffstr.split(',')[0].trim()) {<br \/>\n                  offstr=optsare[ioptsare];<br \/>\n                  mlook=true;<br \/>\n                  affstr=ffstr.trim().replace(\/\\,\\ \\ \/g,',').replace(\/\\,\\ \/g,',').replace(\/\\,$\/g,'').split(',');<br \/>\n                }<br \/>\n             }<br \/>\n          }<br \/>\n          outidea=outidea.replace(ffstr.split(',')[0].trim(), ffstr.split(',')[0].trim() + '' + (ffstr.replace(imstr.split(',')[0],'').trim() + ',').replace(',,',',').replace(\/\\,$\/g,''));<br \/>\n        }<br \/>\n     }<br \/>\n     <font color=magenta>if (mlook) { setInterval(eatatjoes, 8000); }<\/font><br \/>\n     return outidea;<br \/>\n  <font color=cyan>}<\/font><br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; helped out via the original <font color=magenta>setInterval Javascript &#8220;eatatjoes&#8221; function<\/font> (all kicked off via modified document.body onload logic <br \/><i style=font-size:8px;>document.getElementById(&#8216;mainspan&#8217;).title = <font color=cyan>andthen(<\/font>document.getElementById(&#8216;schoices&#8217;).innerText.replace(\/\\&#038;nbsp\\;\/g,&#8217; &#8216;).replace(\/\\ \\ \/g,&#8217;, &#8216;)<font color=cyan>)<\/font>;<\/i><br \/>), <font color=purple>as modified<\/font>, above.<\/p>\n<p>You can see this in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php-----------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php-----------GETME\">voiceover.php<\/a> PHP (we&#8217;d want you to download to a local <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> Apache web server&#8217;s Document Root folder and which you can <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\">run that PHP there<\/a>).<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-ffmpeg-and-pandoc-and-imagemagick-and-pdfimages-animated-dropdown-tutorial\/'>New Ffmpeg and Pandoc and ImageMagick and Pdfimages Animated Dropdown Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fpimpadt'>Previous relevant <a target=_blank title='Ffmpeg and Pandoc and ImageMagick and Pdfimages Animated Dropdown Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-and-pandoc-and-imagemagick-and-pdfimages-animated-dropdown-tutorial\/'>Ffmpeg and Pandoc and ImageMagick and Pdfimages Animated Dropdown Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Ffmpeg and Pandoc and ImageMagick and Pdfimages Animated Dropdown Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover_eatatjoes.jpg\" title=\"Ffmpeg and Pandoc and ImageMagick and Pdfimages  Animated Dropdown Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Ffmpeg and Pandoc and ImageMagick and Pdfimages Animated Dropdown Tutorial<\/p><\/div>\n<p><a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=tpwI7xk34bc'>Lemon curry<\/a>?!  Animated dropdown?!  What gives?  Well, it&#8217;s not &#8220;shelling peas&#8221;, yet!<\/p>\n<p>Yes, there is another &#8220;framework&#8221; step forward we wanted to implement before the peas.  And yes, no surprises there, the &#8220;framework&#8221; work relates to adding functionality to our main dropdown.  We&#8217;re adding a layer of functionality we&#8217;re going to refer to as &#8220;animated dropdown&#8221;.  It amounts to &#8230;<\/p>\n<ul>\n<li>dropdown (ie. <a target=_blank href='http:\/\/www.w3schools.com\/tags\/tag_select.asp' title='HTML select tag information from w3schools'>select<\/a> element) &#8230; for non-mobile &#8230;<\/li>\n<li>has <i>size<\/i> attribute equal to the number of option elements it contains<\/li>\n<li>logic wise, because our non-nothing option innerText<sub>s<\/sub> have equalled option value<sub>s<\/sub> (if you Javascript trim() the option innerText, <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg'>that is<\/a>), we have the opportunity to <font color=blue>start taking more notice<\/font> of the &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  function process(tv, tvo) {<br \/>\n    var newval='';<br \/>\n    <font color=blue>var ourtv=tvo.value;<br \/>\n    if (tv != '') {<br \/>\n      ourtv=tvo.options[tvo.selectedIndex].innerText.trim();<br \/>\n    }<\/font><br \/>\n    if (origval == '') { origval=document.getElementById('mydefopt').title;  }<br \/>\n    if (tv == '') {<br \/>\n      document.getElementById('mainspan').innerHTML=document.getElementById('mydefopt').title;<br \/>\n    } else {<br \/>\n      document.getElementById('mydefopt').title=<font color=blue>ourtv; \/\/<\/font>tv;<br \/>\n      document.getElementById('mainspan').innerHTML=document.getElementById('mydefopt').title;<br \/>\n      document.getElementById('schoices').value='';<br \/>\n    }<br \/>\n    newval=document.getElementById('mydefopt').title;<br \/>\n    \/\/alert('origval,newval=' + origval + ' ' + newval);<br \/>\n    if (newval != origval) {<br \/>\n      origval=newval;<br \/>\n      wentfrom(origval, newval);<br \/>\n    } else {<br \/>\n      origval=newval;<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<br \/>\n &#8230; option innerHTML as above, meaning &#8230;\n<\/li>\n<li>we can set up Javascript code facilitating the animated feel of some option innerHTML looks that are taken notice of as selected via &#8230;<br \/>\n<table style=font-size:10px;>\n<tr>\n<th>Global var<font size=1>iables<\/font> arranged via each &#8220;verb&#8221; involved &#8230; for today&#8217;s &#8220;proof of concept&#8221; we add one extra Pandoc &#8220;Text to Rich Text&#8221; option, <font color=blue>for now<\/font>, before the flood of peas arrives &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  var mlook=false;<br \/>\n  var imstr='  Images to PDF,  ', oimstr=null, kimstr=0, aimstr=[];<br \/>\n  var pdstr='  PDF to Images,  ', opdstr=null, kpdstr=0, apdstr=[];<br \/>\n  var pastr='  Text to HTML,  <font color=blue>Text to Rich Text,<\/font>', opastr=null, kpastr=0, apastr=[];<br \/>\n  var ffstr='  Concat demuxer,  ', offstr=null, kffstr=0, affstr=[];<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;\n<\/td>\n<\/tr>\n<tr>\n<td>As heading title is determined at document.body onload <i>document.getElementById(&#8216;mainspan&#8217;).title=<font color=blue>andthen(<\/font>document.getElementById(&#8216;schoices&#8217;).innerText.replace(\/\\&#038;nbsp\\;\/g,&#8217; &#8216;).replace(\/\\ \\ \/g,&#8217;, &#8216;)<font color=blue>)<\/font>;<\/i> &#8230;<\/td>\n<\/tr>\n<tr>\n<td>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  function andthen(iidea) {<br \/>\n     var outidea=iidea;<br \/>\n     var fndpos=-1;<br \/>\n     var optsare=document.getElementsByTagName('option'), ioptsare=0;<br \/>\n     var iimstr=(imstr.indexOf(',') == -1 ? -1 : outidea.indexOf(imstr.split(',')[0].trim() + ','));<br \/>\n     mlook=false;<br \/>\n     if (iimstr != -1) {<br \/>\n        if ((imstr.split(',')[0].trim() + ',') != imstr.trim()) {<br \/>\n          if (document.getElementById('oimagemagick')) {<br \/>\n             oimstr=document.getElementById('oimagemagick');<br \/>\n             mlook=true;<br \/>\n             aimstr=imstr.trim().replace(\/\\,\\ \\ \/g,',').replace(\/\\,\\ \/g,',').replace(\/\\,$\/g,'').split(',');<br \/>\n          } else {<br \/>\n             for (ioptsare=0; ioptsare&lt;optsare.length; ioptsare++) {<br \/>\n                if (optsare[ioptsare].value == imstr.split(',')[0].trim()) {<br \/>\n                  oimstr=optsare[ioptsare];<br \/>\n                  mlook=true;<br \/>\n                  aimstr=imstr.trim().replace(\/\\,\\ \\ \/g,',').replace(\/\\,\\ \/g,',').replace(\/\\,$\/g,'').split(',');<br \/>\n                }<br \/>\n             }<br \/>\n          }<br \/>\n          outidea=outidea.replace(imstr.split(',')[0].trim(), imstr.split(',')[0].trim() + '' + (imstr.replace(imstr.split(',')[0],'').trim() + ',').replace(',,',',').replace(\/\\,$\/g,''));<br \/>\n        }<br \/>\n     }<br \/>\n     var ipdstr=(pdstr.indexOf(',') == -1 ? -1 : outidea.indexOf(pdstr.split(',')[0].trim() + ','));<br \/>\n     if (ipdstr != -1) {<br \/>\n        if ((pdstr.split(',')[0].trim() + ',') != pdstr.trim()) {<br \/>\n          if (document.getElementById('opdfimages')) {<br \/>\n             opdstr=document.getElementById('opdfimages');<br \/>\n             mlook=true;<br \/>\n             aipdtr=pdstr.trim().replace(\/\\,\\ \\ \/g,',').replace(\/\\,\\ \/g,',').replace(\/\\,$\/g,'').split(',');<br \/>\n          } else {<br \/>\n             for (ioptsare=0; ioptsare&lt;optsare.length; ioptsare++) {<br \/>\n                if (optsare[ioptsare].value == pdstr.split(',')[0].trim()) {<br \/>\n                  opdstr=optsare[ioptsare];<br \/>\n                  mlook=true;<br \/>\n                  apdstr=pdstr.trim().replace(\/\\,\\ \\ \/g,',').replace(\/\\,\\ \/g,',').replace(\/\\,$\/g,'').split(',');<br \/>\n                }<br \/>\n             }<br \/>\n          }<br \/>\n          outidea=outidea.replace(pdstr.split(',')[0].trim(), pdstr.split(',')[0].trim() + '' + (pdstr.replace(imstr.split(',')[0],'').trim() + ',').replace(',,',',').replace(\/\\,$\/g,''));<br \/>\n        }<br \/>\n     }<br \/>\n     var ipastr=(pastr.indexOf(',') == -1 ? -1 : outidea.indexOf(pastr.split(',')[0].trim() + ','));<br \/>\n     if (ipastr != -1) {<br \/>\n        if ((pastr.split(',')[0].trim() + ',') != pastr.trim()) {<br \/>\n          if (document.getElementById('opandoc')) {<br \/>\n             opastr=document.getElementById('opandoc');<br \/>\n             mlook=true;<br \/>\n             apastr=pastr.trim().replace(\/\\,\\ \\ \/g,',').replace(\/\\,\\ \/g,',').replace(\/\\,$\/g,'').split(',');<br \/>\n          } else {<br \/>\n             for (ioptsare=0; ioptsare&lt;optsare.length; ioptsare++) {<br \/>\n                if (optsare[ioptsare].value == pastr.split(',')[0].trim()) {<br \/>\n                  opastr=optsare[ioptsare];<br \/>\n                  mlook=true;<br \/>\n                  apastr=pastr.trim().replace(\/\\,\\ \\ \/g,',').replace(\/\\,\\ \/g,',').replace(\/\\,$\/g,'').split(',');<br \/>\n                }<br \/>\n             }<br \/>\n          }<br \/>\n          outidea=outidea.replace(pastr.split(',')[0].trim(), pastr.split(',')[0].trim() + '' + (pastr.replace(imstr.split(',')[0],'').trim() + ',').replace(',,',',').replace(\/\\,$\/g,''));<br \/>\n        }<br \/>\n     }<br \/>\n     var iffstr=(ffstr.indexOf(',') == -1 ? -1 : outidea.indexOf(ffstr.split(',')[0].trim() + ','));<br \/>\n     if (iffstr != -1) {<br \/>\n        if ((ffstr.split(',')[0].trim() + ',') != ffstr.trim()) {<br \/>\n          if (document.getElementById('offmpeg')) {<br \/>\n             offstr=document.getElementById('offmpeg');<br \/>\n             mlook=true;<br \/>\n             affstr=ffstr.trim().replace(\/\\,\\ \\ \/g,',').replace(\/\\,\\ \/g,',').replace(\/\\,$\/g,'').split(',');<br \/>\n          } else {<br \/>\n             for (ioptsare=0; ioptsare&lt;optsare.length; ioptsare++) {<br \/>\n                if (optsare[ioptsare].value == ffstr.split(',')[0].trim()) {<br \/>\n                  offstr=optsare[ioptsare];<br \/>\n                  mlook=true;<br \/>\n                  affstr=ffstr.trim().replace(\/\\,\\ \\ \/g,',').replace(\/\\,\\ \/g,',').replace(\/\\,$\/g,'').split(',');<br \/>\n                }<br \/>\n             }<br \/>\n          }<br \/>\n          outidea=outidea.replace(ffstr.split(',')[0].trim(), ffstr.split(',')[0].trim() + '' + (ffstr.replace(imstr.split(',')[0],'').trim() + ',').replace(',,',',').replace(\/\\,$\/g,''));<br \/>\n        }<br \/>\n     }<br \/>\n     if (mlook) { setInterval(eatatjoes, 8000); }<br \/>\n     return outidea;<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<br \/>\n &#8230; the appeal of all this being that the dropdown height can be controlled by swapping animation for height extension (and user experience downgrades)\n<\/td>\n<\/tr>\n<tr>\n<td>Animated dropdown setInterval Javascript function (<i>bit like<\/i> marquee <i>Eat at Joes<\/i> type of animation<font size=1> (we&#8217;ll see if it gets more like it into the future, perhaps?)<\/font>) &#8230;<\/td>\n<\/tr>\n<tr>\n<td>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  function eatatjoes() {<br \/>\n     if (oimstr) {<br \/>\n       if (kimstr &gt;= eval('' + aimstr.length)) {<br \/>\n         kimstr=0;<br \/>\n         oimstr.innerHTML='  ' + aimstr[kimstr];<br \/>\n       } else {<br \/>\n         oimstr.innerHTML='  ' + aimstr[kimstr];<br \/>\n         kimstr++;<br \/>\n       }<br \/>\n     }<br \/>\n     if (opdstr) {<br \/>\n       if (kpdstr &gt;= eval('' + apdstr.length)) {<br \/>\n         kpdstr=0;<br \/>\n         opdstr.innerHTML='  ' + apdstr[kpdstr];<br \/>\n       } else {<br \/>\n         opdstr.innerHTML='  ' + apdstr[kpdstr];<br \/>\n         kpdstr++;<br \/>\n       }<br \/>\n     }<br \/>\n     if (opastr) {<br \/>\n       if (kpastr &gt;= eval('' + apastr.length)) {<br \/>\n         kpastr=0;<br \/>\n         opastr.innerHTML='  ' + apastr[kpastr];<br \/>\n       } else {<br \/>\n         opastr.innerHTML='  ' + apastr[kpastr];<br \/>\n         kpastr++;<br \/>\n       }<br \/>\n     }<br \/>\n     if (offstr) {<br \/>\n       if (kffstr &gt;= eval('' + affstr.length)) {<br \/>\n         kffstr=0;<br \/>\n         offstr.innerHTML='  ' + affstr[kffstr];<br \/>\n       } else {<br \/>\n         offstr.innerHTML='  ' + affstr[kffstr];<br \/>\n         kffstr++;<br \/>\n       }<br \/>\n     }<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;\n<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<\/ul>\n<p> &#8230; onto yesterday&#8217;s <a title='Ffmpeg and Pandoc and ImageMagick and Pdfimages Media Tutorial' href='#fpimpmt'>Ffmpeg and Pandoc and ImageMagick and Pdfimages Media Tutorial<\/a> in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php----------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php----------GETME\">voiceover.php<\/a> PHP (we&#8217;d want you to download to a local <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> Apache web server&#8217;s Document Root folder and which you can <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\">run that PHP there<\/a>).<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-and-pandoc-and-imagemagick-and-pdfimages-animated-dropdown-tutorial\/'>Ffmpeg and Pandoc and ImageMagick and Pdfimages Animated Dropdown Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fpimpmt'>Previous relevant <a target=_blank title='Ffmpeg and Pandoc and ImageMagick and Pdfimages Media Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-and-pandoc-and-imagemagick-and-pdfimages-media-tutorial\/'>Ffmpeg and Pandoc and ImageMagick and Pdfimages Media Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Ffmpeg and Pandoc and ImageMagick and Pdfimages Media Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover_pandoc.jpg\" title=\"Ffmpeg and Pandoc and ImageMagick and Pdfimages Media Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Ffmpeg and Pandoc and ImageMagick and Pdfimages Media Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='Ffmpeg and ImageMagick and Pdfimages Media Tutorial' href='#fimpmt'>Ffmpeg and ImageMagick and Pdfimages Media Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li><a style=vertical-align:top; target=_blank title=ffmpeg href='\/\/ffmpeg.org'>ffmpeg<\/a> &#8230; two more media manipulation &#8220;verb&#8221; stars today &#8230;<\/li>\n<li><a target=_blank title='ImageMagick software suite' href='https:\/\/www.imagemagick.org\/'>ImageMagick<\/a> (can help us with new &#8220;Images to PDF&#8221; option)<\/li>\n<li><a target=_blank title='Pdfimages' href='https:\/\/www.xpdfreader.com\/pdfimages-man.html'>pdfimages<\/a> (can help us with new &#8220;PDF to Images&#8221; option) &#8230; &#8220;verb&#8221; collection, today, we wanted to add &#8230;<\/li>\n<li><a target=_blank title='Pandoc' href='https:\/\/pandoc.org'>pandoc<\/a> (can help us with new &#8220;Text to HTML&#8221; option) &#8230;<br \/>\n<blockquote cite='\/\/pandoc.org'><p>\nIf you need to convert files from one markup format into another, pandoc is your swiss-army knife.\n<\/p><\/blockquote>\n<\/li>\n<\/ul>\n<p> &#8230; to help improve the &#8220;one stop shop&#8221; aspects, especially regarding &#8220;documents&#8221;, to our current Intranet feeling web application in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php---------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php---------GETME\">voiceover.php<\/a> PHP (we&#8217;d want you to download to a local <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> Apache web server&#8217;s Document Root folder and which you can <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\">run that PHP there<\/a>).<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-and-pandoc-and-imagemagick-and-pdfimages-media-tutorial\/'>Ffmpeg and Pandoc and ImageMagick and Pdfimages Media Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fimpmt'>Previous relevant <a target=_blank title='Ffmpeg and ImageMagick and Pdfimages Media Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-and-imagemagick-and-pdfimages-media-tutorial\/'>Ffmpeg and ImageMagick and Pdfimages Media Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Ffmpeg and ImageMagick and Pdfimages Media Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/imagemagick_and_pdfimages_and_ffmpeg_media_manipulations.gif\" title=\"Ffmpeg and ImageMagick and Pdfimages Media Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Ffmpeg and ImageMagick and Pdfimages Media Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Ffmpeg Rotate Video Tutorial' href='#frvt'>Ffmpeg Rotate Video Tutorial<\/a> left you with &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-rotate-video-tutorial\/'><p>\nWe now present those four in &#8220;an expanded out&#8221; (at least on non-mobile) dropdown HTML element.  Maybe you can guess why?\n<\/p><\/blockquote>\n<p> &#8230; and today we are deploying the framework parts and two new media manipulation options regarding PDF that add to our PHP web application&#8217;s functionality.<\/p>\n<p>Operating system commands can be thought of to start with &#8230;<\/p>\n<ul>\n<li>an action item (to be precise a desktop software file specification) &#8230; and, what we often think is, like &#8230;<\/li>\n<li>the command&#8217;s &#8220;verb&#8221; part <font size=1>(as funny as that is to think of a &#8220;noun&#8221; sounding desktop software file specification being like a &#8220;verb&#8221;)<\/font> &#8230; verbs being action items in a sentence &#8230; down to being essential in any sentence &#8230; to the point a &#8220;verb&#8221; can be the whole sentence<\/li>\n<\/ul>\n<p>We want to add functionality by adding to our first &#8220;verb&#8221; &#8230;<\/p>\n<ul>\n<li><a style=vertical-align:top; target=_blank title=ffmpeg href='\/\/ffmpeg.org'>ffmpeg<\/a> &#8230; two more media manipulation &#8220;verb&#8221; stars today &#8230;<\/li>\n<li><a target=_blank title='ImageMagick software suite' href='https:\/\/www.imagemagick.org\/'>ImageMagick<\/a> (can help us with new &#8220;Images to PDF&#8221; option)<\/li>\n<li><a target=_blank title='Pdfimages' href='https:\/\/www.xpdfreader.com\/pdfimages-man.html'>pdfimages<\/a> (can help us with new &#8220;PDF to Images&#8221; option)<\/li>\n<\/ul>\n<p> &#8230; and to help the &#8220;framework&#8221; ahead of &#8220;shelling peas&#8221; we lean on the experience we got from the <a target=_blank title='Animated GIF Creation on Windows MAMP via PDF Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-creation-on-windows-mamp-via-pdf-tutorial\/'>Animated GIF Creation on Windows MAMP via PDF Tutorial<\/a> thread of blog postings to deal with &#8230;<\/p>\n<ul>\n<li>software paths<\/li>\n<li>presenting two new &#8220;verb&#8221; ideas &#8230; and us being so fond of dropdowns, we decided to try, for our first time &#8230;\n<ol>\n<li>start to use three HTML option CSS <i>text-align<\/i> style choices being left (for ffmpeg), center (for ImageMagick) and right (for pdfimages) &#8230; as in &#8230;<br \/>\n<select size=7 data-onchange=process(this.value,this); style=display:inline-block;font-size:8px; id=schoices><option style=text-align:center; id=mydefopt title='Add Voiceover Audio to Video' value=''>&#10549; Image&#11015;Magick &#10550;<\/option><option value='Add Voiceover Audio to Video'> Add Voiceover Audio to Video&nbsp;<\/option><option style='text-align:center;' value='Images to PDF'>  Images to PDF<\/option><option style='text-align:right;' value='PDF to Images'>  PDF to Images<\/option><option value='Burn subtitles'>  Burn subtitles<\/option><option value='Concat demuxer'>  Concat demuxer<\/option><option value='Rotate a video'>  Rotate a video<\/option><\/select><br \/>\n &#8230; within &#8230;<\/p>\n<h4 id=myh1 style=vertical-align:top;><span id=mainspan style=vertical-align:top;>Add Voiceover Audio to Video<\/span><span style=vertical-align:top;> via <\/span><a style=vertical-align:top; target=_blank title=ffmpeg href='\/\/ffmpeg.org'>ffmpeg<\/a>&nbsp;<select size=7 data-onchange=process(this.value,this); style=display:inline-block;font-size:8px; id=schoices><option style=text-align:center; id=mydefopt title='Add Voiceover Audio to Video' value=''>&#10549; Image&#11015;Magick &#10550;<\/option><option value='Add Voiceover Audio to Video'> Add Voiceover Audio to Video&nbsp;<\/option><option style='text-align:center;' value='Images to PDF'>  Images to PDF<\/option><option style='text-align:right;' value='PDF to Images'>  PDF to Images<\/option><option value='Burn subtitles'>  Burn subtitles<\/option><option value='Concat demuxer'>  Concat demuxer<\/option><option value='Rotate a video'>  Rotate a video<\/option><\/select>&nbsp;<a style=vertical-align:top; target=_blank title=pdfimages href='\/\/www.xpdfreader.com\/pdfimages-man.html'>pdfimages<\/a><\/h4>\n<p> &#8230;<br \/>\n<code><br \/>\n&lt;select size=7 onchange=process(this.value,this); style=display:inline-block;font-size:8px; id=schoices&gt;&lt;option style=text-align:center; id=mydefopt title='Add Voiceover Audio to Video' value=''&gt;&amp;#10549; Image&amp;#11015;Magick &amp;#10550;&lt;\/option&gt;&lt;option value='Add Voiceover Audio to Video'&gt; Add Voiceover Audio to Video&nbsp;&lt;\/option&gt;&lt;option style='text-align:center;' value='Images to PDF'&gt;  Images to PDF&lt;\/option&gt;&lt;option style='text-align:right;' value='PDF to Images'&gt;  PDF to Images&lt;\/option&gt;&lt;option value='Burn subtitles'&gt;  Burn subtitles&lt;\/option&gt;&lt;option value='Concat demuxer'&gt;  Concat demuxer&lt;\/option&gt;&lt;option value='Rotate a video'&gt;  Rotate a video&lt;\/option&gt;&lt;\/select&gt;<br \/>\n<\/code><br \/>\n &#8230; and then in order to offer the &#8220;center&#8221; ImageMagick be a link back to the product we introduce some <font color=blue>new overlay code<\/font> &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  function overlay() {<br \/>\n   origval=document.getElementById('schoices').value;<br \/>\n   var rect=document.getElementById('fcommand').getBoundingClientRect();<br \/>\n   document.getElementById('moreb').style.position='absolute';<br \/>\n   document.getElementById('moreb').style.left='' + rect.left + 'px';<br \/>\n   document.getElementById('moreb').style.top='' + rect.top + 'px';<br \/>\n   document.getElementById('moreb').style.width='96%'; \/\/' + rect.width + 'px';<br \/>\n   document.getElementById('moreb').style.height='' + rect.height + 'px';<br \/>\n   document.getElementById('moreb').style.border='1px solid black';<br \/>\n   document.getElementById('moreb').style.paddingLeft='20px';<br \/>\n   document.getElementById('moreb').style.backgroundColor='#f9f9f9';<br \/>\n   document.getElementById('fcommand').style.opacity='0.0';<br \/>\n   document.getElementById('fcommand').style.cursor='pointer';<br \/>\n   document.getElementById('moreb').innerHTML='&lt;span id=precmds&gt;&lt;\/span&gt;&lt;span id=verb&gt;ffmpeg\" . $ffmpegsuf . \"&lt;\/span&gt; &lt;span id=prescbi&gt;&lt;\/span&gt;&lt;span id=minusi&gt; -i &lt;\/span&gt;&lt;span id=scbi&gt;&lt;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=69075964842271&left=y\\\"&gt;&lt;\/iframe&gt;&lt;\/span&gt; &lt;span id=betweenis&gt;&lt;\/span&gt; &lt;span id=secondi&gt;-i &lt;span id=scbix&gt;&lt;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=69075964842271&right=y\\\"&gt;&lt;\/iframe&gt;&lt;\/span&gt;&lt;\/span&gt; &lt;span id=sswitches&gt;-c copy -map 0:v:0 -map 1:a:0 -shortest&lt;\/span&gt; out.mp4 &gt; &lt;a target=_blank title=ffimpdf.bad onclick=getvb(); style=cursor:pointer;text-decoration:underline; data-href=.\/ffimpdf.bad&gt;ffimpdf.bad&lt;\/a&gt;';<br \/>\n   if (firstdivih == '') { firstdivih=document.getElementById('moreb').innerHTML; }<br \/>\n   if (firstbutval == '') { firstbutval=document.getElementById('mysub').value; }<br \/>\n   document.getElementById('schoices').style.display='inline-block';<br \/>\n<br \/> <br \/>\n   <font color=blue>rect=document.getElementById('schoices').getBoundingClientRect();<br \/>\n<br \/> <br \/>\n   if (eval('' + rect.height) &gt; 100 || 1 == 1) {<br \/>\n   document.getElementById('doverlay').style.position='absolute';<br \/>\n   document.getElementById('doverlay').style.left='' + rect.left + 'px';<br \/>\n   document.getElementById('doverlay').style.top='' + rect.top + 'px';<br \/>\n   document.getElementById('doverlay').style.width='' + rect.width + 'px';<br \/>\n   if (eval('' + rect.height) &lt; 30) {<br \/>\n   document.getElementById('doverlay').style.height='' + rect.height + 'px';<br \/>\n   } else {<br \/>\n   document.getElementById('doverlay').style.height='' + eval(eval('' + rect.height) \/ eval('' + document.getElementById('schoices').size)) + 'px';<br \/>\n   }<br \/>\n   document.getElementById('doverlay').style.zIndex='96';<br \/>\n   document.getElementById('doverlay').style.textAlign='center';<br \/>\n   document.getElementById('doverlay').style.display='block';<br \/>\n   document.getElementById('doverlay').title=document.getElementById('mydefopt').title;<br \/>\n   \/\/document.getElementById('mydefopt').style.fontColor='transparent';<br \/>\n   document.getElementById('mydefopt').innerHTML='';<br \/>\n   setInterval(fhoc, 1000);<br \/>\n   }<\/font><br \/>\n<br \/> <br \/>\n  }<br \/>\n<br \/> <br \/>\n  <font color=blue>function fhoc() {<br \/>\n   var rectx=document.getElementById('schoices').getBoundingClientRect();<br \/>\n   document.getElementById('doverlay').style.left='' + rectx.left + 'px';<br \/>\n   document.getElementById('doverlay').title=document.getElementById('mydefopt').title;<br \/>\n   if (document.getElementById('scbi')) {<br \/>\n     if (document.getElementById('scbi').innerHTML.indexOf('&lt;') == -1) {<br \/>\n      if (document.getElementById('scbi').innerHTML.trim().indexOf(' ') != -1) {<br \/>\n        if (document.getElementById('scbi').innerHTML.trim().indexOf(String.fromCharCode(34)) == -1) {<br \/>\n          document.getElementById('scbi').innerHTML=String.fromCharCode(34) + document.getElementById('scbi').innerHTML.trim() + String.fromCharCode(34);<br \/>\n        }<br \/>\n      }<br \/>\n     }<br \/>\n   }<br \/>\n   if (document.getElementById('scbix')) {<br \/>\n     if (document.getElementById('scbix').innerHTML.indexOf('&lt;') == -1) {<br \/>\n      if (document.getElementById('scbix').innerHTML.trim().indexOf(' ') != -1) {<br \/>\n        if (document.getElementById('scbix').innerHTML.trim().indexOf(String.fromCharCode(34)) == -1) {<br \/>\n          document.getElementById('scbix').innerHTML=String.fromCharCode(34) + document.getElementById('scbix').innerHTML.trim() + String.fromCharCode(34);<br \/>\n        }<br \/>\n      }<br \/>\n     }<br \/>\n   }<br \/>\n  }<\/font><br \/>\n<\/code><br \/>\n&#8220;; ?&gt;\n<\/li>\n<\/ol>\n<\/li>\n<li>Javascript to set up the HTML div contenteditable=true look for these two new options &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n    if (newv == 'PDF to Images') {<br \/>\n       document.getElementById('moreb').innerHTML=firstdivih.replace(' out.mp4',' \" . $minuspng . \"');<br \/>\n       document.getElementById('secondi').innerHTML='';<br \/>\n       document.getElementById('sswitches').innerHTML=\\\"&lt;span id=sfolder contenteditable=false&gt;newfolder_\" . rand(0,784534) . str_replace(\"\\\\\",\"\\\\\\\\\",$ddn) . \"\\\" + '&lt;\/span&gt;ideas';<br \/>\n<br \/>\n       document.getElementById('precmds').innerHTML=' ';<br \/>\n       document.getElementById('verb').innerHTML='\" . $pdfimages . $pdfimagessuf . \"';<br \/>\n       document.getElementById('scbi').innerHTML=document.getElementById('scbi').innerHTML.replace(\/inv\\.mp4\/g,'inv.pdf      ');<br \/>\n       document.getElementById('minusi').innerHTML=' -j ';<br \/>\n<br \/>\n       document.getElementById('mysub').value=newv;<br \/>\n    } else if (newv == 'Images to PDF') {<br \/>\n       document.getElementById('moreb').innerHTML=firstdivih.replace('out.mp4','out.pdf');<br \/>\n<br \/>\n       document.getElementById('precmds').innerHTML=' ';<br \/>\n       document.getElementById('secondi').innerHTML='';<br \/>\n       document.getElementById('verb').innerHTML='\" . $magickverb . $magicksuf . \"';<br \/>\n       document.getElementById('sswitches').innerHTML='-auto-orient';<br \/>\n       document.getElementById('sswitches').title='To perform a folder of images (only, we suggest) right click or two finger guesture to left and enter the folder name only';<br \/>\n       document.getElementById('scbi').innerHTML=document.getElementById('scbi').innerHTML.replace(\/inv\\.mp4\/g,'inv.jpg      ');<br \/>\n       document.getElementById('minusi').innerHTML='';<br \/>\n       document.getElementById('scbi').setAttribute('contenteditable', true);<br \/>\n       document.getElementById('scbi').onblur=function(event) {  if (document.getElementById('mydefopt').title == 'Images to PDF') {  if (event.target.innerHTML.replace(\/\\&nbsp\\;\/g,' ').trim() == '') { event.target.innerHTML='folder' + \\\"\" . str_replace(\"\\\\\",\"\\\\\\\\\",$ddn) . \"*\\\";  } if (event.target.innerHTML.toLowerCase().indexOf('.txt') == -1) {  if (event.target.innerHTML.indexOf('.') != -1) { document.getElementById('ifs').innerHTML+='&lt;iframe id=voaskfor' + ifile + ' style=display:none; src=\\\".\/voiceover.php?infilegetsize=' + encodeURIComponent(listtxt + ';' + event.target.innerHTML) + '\\\"&gt;&lt;\/iframe&gt;';  ifile++;    if (document.getElementById('moreb').title.indexOf(\\\"file '\\\" + event.target.innerHTML.replace(String.fromCharCode(34),'').replace(String.fromCharCode(34),'') + \\\"'\\\") == -1) {     document.getElementById('moreb').title+=String.fromCharCode(10) + \\\"file '\\\" + event.target.innerHTML.replace(String.fromCharCode(34),'').replace(String.fromCharCode(34),'') + \\\"'\\\"; } } } event.target.innerHTML=listtxt; if (document.getElementById('minusi')) { document.getElementById('minusi').innerHTML='';  }  }  };<br \/>\n       document.getElementById('moreb').onblur=function(event) {  if (document.getElementById('mydefopt').title == 'Images to PDF') { if (document.getElementById('minusi')) { var thingos=document.getElementById('minusi').innerHTML.replace(\/\\&nbsp\\;\/g,' ').trim().split('-i '); if (thingos.length &gt; 1) { if (thingos[1].trim() != '' && (thingos[1] + '~').toLowerCase().indexOf('.txt~') == -1) { spanfill(thingos[1]); }  } document.getElementById('minusi').innerHTML='';  }  if (!document.getElementById('scbi')) { event.target.innerHTML=event.target.innerHTML.replace('&lt;span id=\\\"between', '&lt;span id=scbi contenteditable=true&gt;' + listtxt + '&lt;\/span&gt; &lt;span id=\\\"between');  putbackonblur(); if (event.target.innerHTML.indexOf('&gt; -i &lt;\/span&gt;&lt;span id=\\\"scbi\\\"') == -1) { event.target.innerHTML=event.target.innerHTML.replace('&lt;\/span&gt;' + event.target.innerHTML.split('&lt;span id=\\\"scbi\\\"')[0].split('&lt;\/span&gt;')[-1 + eval(event.target.innerHTML.split('&lt;span id=\\\"scbi\\\"')[0].split('&lt;\/span&gt;').length)],'&lt;\/span&gt;');   } } }  };<br \/>\n       document.getElementById('moreb').oncontextmenu=function(event) { document.getElementById('scbi').innerHTML='folder' + \\\"\" . str_replace(\"\\\\\",\"\\\\\\\\\",$ddn) . \"*\\\"; };<br \/>\n<br \/> <br \/>\n       document.getElementById('mysub').value=newv;<br \/>\n    }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;\n<\/li>\n<li>the performing of those two new &#8220;verb&#8221; ideas &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n   $pfolder='';<br \/>\n   $ppdf='';<br \/>\n<br \/>\n   \/\/ ... later ...<br \/>\n   $cmdis=str_replace('+',' ',urldecode($_GET['fcommand']));<br \/>\n   if (PHP_OS =='WINNT' || PHP_OS =='WIN32' || PHP_OS =='Windows') {<br \/>\n     if ($ffmpegpre != '' && strpos($cmdis, 'ffmpeg.') !== false && strpos($cmdis, $ffmpegpre) === false) {<br \/>\n       $cmdis=str_replace('ffmpeg.', $ffmpegpre . 'ffmpeg.', $cmdis);<br \/>\n     }<br \/>\n     if ($magickpre != '' && strpos($cmdis, $magickverb . '.') !== false && strpos($cmdis, $magickpre) === false) {<br \/>\n       $cmdis=str_replace($magickverb . '.', $magickpre . $magickverb . '.', $cmdis);<br \/>\n     }<br \/>\n     if ($pdfimagespre != '' && strpos($cmdis, 'pdfimages.') !== false && strpos($cmdis, $pdfimagespre) === false) {<br \/>\n       $cmdis=str_replace('pdfimages.', $pdfimagespre . 'pdfimages.', $cmdis);<br \/>\n     }<br \/>\n   }<br \/>\n<br \/>\n   $precmd=explode('&gt;', $cmdis);<br \/>\n   if (strpos($cmdis, 'pdfimages') !== false && strpos($cmdis, 'newfolder_') !== false) {<br \/>\n     $pfolder='newfolder_' . explode(DIRECTORY_SEPARATOR, explode('newfolder_', $cmdis)[1])[0];<br \/>\n     $beforep=explode($pfolder, $cmdis)[0];<br \/>\n     $afterp=explode($pfolder, $cmdis)[1];<br \/>\n     while (file_exists($pfolder)) {<br \/>\n       $pfolder='newfolder' . '_' . explode('newfolder', $pfolder)[1];<br \/>\n       $cmdis=$beforep . $pfolder . $afterp;<br \/>\n     }<br \/>\n     if (!file_exists($pfolder)) { mkdir($pfolder); }<br \/>\n   }<br \/>\n<br \/>\n   \/\/ ... later ...<br \/>\n      $outf=$subcmd[1];<br \/>\n   \/\/ ... later ...<br \/>\n      if (strpos(strtolower(trim($outf) . '~'), '.pdf~') !== false) {<br \/>\n        $ppdf=trim($outf);<br \/>\n      }<br \/>\n<br \/>\n   \/\/ ... later ...<br \/>\n   $rs=shell_exec($cmdis);<br \/>\n<br \/>\n   \/\/ ... later ...<br \/>\n   if ($pfolder != '') {<br \/>\n     $rs.=\"&lt;br&gt;&lt;br&gt;\";<br \/>\n     foreach (glob($pfolder . DIRECTORY_SEPARATOR . '*.*') as $ifilename) {<br \/>\n       $rs.='&lt;img title=\"' . $ifilename . '\" src=\"' . $ifilename . '?rand=' . rand(0,7654532) . '\"&gt;&lt;\/img&gt;';<br \/>\n     }<br \/>\n   }<br \/>\n   if ($ppdf != '') {<br \/>\n     $outf='';<br \/>\n     $rs.=\"&lt;br&gt;&lt;br&gt;&lt;iframe style='width:98%;height:800px;' src='\" . $ppdf . \"?rand=\" . rand(0,7654532) . \"' title='\" . $ppdf . \"'&gt;&lt;\/iframe&gt;\";<br \/>\n   }<br \/>\n<\/code><br \/>\n?&gt;\n<\/li>\n<\/ul>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php--------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php--------GETME\">voiceover.php<\/a> PHP (we&#8217;d want you to download to a local <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> Apache web server&#8217;s Document Root folder and which you can <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\">run that PHP there<\/a>).<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-and-imagemagick-and-pdfimages-media-tutorial\/'>Ffmpeg and ImageMagick and Pdfimages Media Tutorial<\/a>.<\/p-->\n<hr>\n<p id='frvt'>Previous relevant <a target=_blank title='Ffmpeg Rotate Video Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-rotate-video-tutorial\/'>Ffmpeg Rotate Video Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Ffmpeg Rotate Video Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/rotate_a_video.jpg\" title=\"Ffmpeg Rotate Video Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Ffmpeg Rotate Video Tutorial<\/p><\/div>\n<p>It&#8217;s getting closer to &#8220;shelling peas&#8221;, are today&#8217;s &#8220;Rotate a video via <a target=_blank title='ffmpeg' href='https:\/\/www.ffmpeg.org\/'>ffmpeg<\/a>&#8221; changes, but we are not there yet.   Yes, most programmers want to be &#8220;shelling peas&#8221; adding functionality to web applications, once they have set up a framework in which they are happy to work.  Yesterday&#8217;s <a title='Ffmpeg Concat Demuxer Tutorial' href='#fcdt'>Ffmpeg Concat Demuxer Tutorial<\/a> <a href='#pdefence'>&#8220;defence talk&#8221;<\/a> is getting us closer to that &#8220;shelling peas&#8221; &#8220;homeostasis feel&#8221; <font size=1>(with an &#8220;Intranet&#8221; pike, no doubt?!)<\/font> as you can see from a Javascript &#8220;Rotate a video&#8221; code snippet below &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\nif (newv == 'Rotate a video') {<br \/>\n       document.getElementById('moreb').innerHTML=firstdivih;<br \/>\n<br \/>\n       document.getElementById('precmds').innerHTML=' ';<br \/>\n       document.getElementById('secondi').innerHTML='';<br \/>\n<br \/> <br \/>\n       document.getElementById('sswitches').innerHTML='&lt;span id=notranspose contenteditable=false&gt;-vf \\\"transpose=&lt;\/span&gt;&lt;span id=transpose contenteditable=true&gt;1&lt;\/span&gt;&lt;span id=nottranspose contenteditable=false&gt;\\\" &lt;\/span&gt;';<br \/>\n       document.getElementById('sswitches').title='\" . str_replace(\"\\n\", \"' + String.fromCharCode(10) + '\",$rotateadvice) . \"';<br \/>\n       document.getElementById('sswitches').oncontextmenu=function(event) { alert(event.target.title); };<br \/>\n<br \/>\n       document.getElementById('mysub').value=newv;<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; effectively straightjacketing the crucial &#8230;<\/p>\n<p><code><br \/>\n -vf \"transpose=1\"<br \/>\n<\/code><\/p>\n<p> &#8230; ffmpeg switch definition, by the user, to changing that <i>1<\/i> above as per the hover over advice, to help the user, straight from <a target=_blank href='https:\/\/gist.github.com\/steven2358\/ba153c642fe2bb1e47485962df07c730'>Mux Video and Audio from another Video<\/a>, thanks, to advise &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$rotateadvice=\"Rotate a video<br \/>\n<br \/>\nRotate 90 clockwise:<br \/>\n<br \/>\nffmpeg -i in.mov -vf \\\"transpose=1\\\" out.mov<br \/>\nFor the transpose parameter you can pass:<br \/>\n<br \/>\n0 = 90CounterCLockwise and Vertical Flip (default)<br \/>\n1 = 90Clockwise<br \/>\n2 = 90CounterClockwise<br \/>\n3 = 90Clockwise and Vertical Flip<br \/>\n<br \/>\nUse -vf \\\"transpose=2,transpose=2\\\" for 180 degrees.\";<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p>Yes, the user can still put a bad entry there, but at least the web application has attempted to point them in the right direction, here.<\/p>\n<p>If you examine the changes <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php-------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php-------GETME\">voiceover.php<\/a> PHP (we&#8217;d want you to download to a local <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> Apache web server&#8217;s Document Root folder and which you can <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\">run that PHP there<\/a>), am sure that <font color=blue>you will concur<\/font> &#8230;<\/p>\n<ul>\n<li><i>Concat demuxer<\/i> concatenation of videos <a target=_blank title='ffmpeg' href='https:\/\/www.ffmpeg.org\/'>ffmpeg<\/a> functionality, onto the &#8220;as of yesterday&#8221; &#8230;<\/li>\n<li><i>Voiceovers<\/i> &#8230; and  &#8230;<\/li>\n<li><i>Burn subtitles<\/i><\/li>\n<li><i><font color=blue>Rotate a video<\/font><\/i><\/li>\n<\/ul>\n<p> &#8230; was the simplest functionality component, yet, of the four.  We now present those four in &#8220;an expanded out&#8221; (at least on non-mobile) dropdown HTML element.  Maybe you can guess why?<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-rotate-video-tutorial\/'>Ffmpeg Rotate Video Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fcdt'>Previous relevant <a target=_blank title='Ffmpeg Concat Demuxer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-concat-demuxer-tutorial\/'>Ffmpeg Concat Demuxer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Ffmpeg Concat Demuxer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/concat_demux.jpg\" title=\"Ffmpeg Concat Demuxer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Ffmpeg Concat Demuxer Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='Ffmpeg Burn Subtitles Tutorial' href='#fbst'>Ffmpeg Burn Subtitles Tutorial<\/a> work we&#8217;re still not up to &#8220;shelling any peas&#8221; adding in &#8230;<\/p>\n<ul>\n<li><i>Concat demuxer<\/i> concatenation of videos <a target=_blank title='ffmpeg' href='https:\/\/www.ffmpeg.org\/'>ffmpeg<\/a> functionality, onto the &#8220;as of yesterday&#8221; &#8230;<\/li>\n<li><i>Voiceovers<\/i> &#8230; and  &#8230;<\/li>\n<li><i>Burn subtitles<\/i><\/li>\n<\/ul>\n<p> &#8230; progress.<\/p>\n<p>What&#8217;s different this time?  Well, ffmpeg works the command, we again thank <a target=_blank href='https:\/\/gist.github.com\/steven2358\/ba153c642fe2bb1e47485962df07c730'>Mux Video and Audio from another Video<\/a> for (regarding &#8220;the plan&#8221;), using an interim file &#8230;<\/p>\n<blockquote cite='https:\/\/gist.github.com\/steven2358\/ba153c642fe2bb1e47485962df07c730'><p>\nConcat demuxer<br \/>\n<br \/>\nFirst, make a text file.<br \/>\n<br \/>\nfile &#8216;in1.mp4&#8217;<br \/>\nfile &#8216;in2.mp4&#8217;<br \/>\nfile &#8216;in3.mp4&#8217;<br \/>\nfile &#8216;in4.mp4&#8217;<br \/>\n<br \/>\nThen, run ffmpeg :<br \/>\n<br \/>\nffmpeg -f concat -i list.txt -c copy out.mp4\n<\/p><\/blockquote>\n<p> &#8230; and for File API browsing (with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html--------------------------------GETME\">our, once again, tweaked<\/a> inhouse <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html--------------------------------GETME\">client_browsing.htm<\/a>) there will be a delay, deriving the file path in &#8220;second call PHP&#8221;.  We handle this by writing two new Javascript functions &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  var ifile=0, ibfile=0;<br \/>\n<br \/>\n  function takeoffone() {<br \/>\n    ibfile--;<br \/>\n    if (ibfile &lt;= 0) {<br \/>\n      document.getElementById('mysub').style.cursor='pointer';<br \/>\n    } else {<br \/>\n      document.getElementById('mysub').style.cursor='progress';<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n  function organizefilenamesize(fn, fs) {<br \/>\n    document.getElementById('ifs').innerHTML+='&lt;iframe id=voaskfor' + ifile + ' style=display:none; src=\\\".\/voiceover.php?concat=' + encodeURIComponent('list.txt') + '&filename=' + encodeURIComponent(fn) + '&haveasleep=' + eval(3 * eval('' + ifile)) + '&filesize=' + fs + '\\\"&gt;&lt;\/iframe&gt;';<br \/>\n    if (ibfile == 0) {<br \/>\n      document.getElementById('mysub').style.cursor='progress';<br \/>\n    }<br \/>\n    ifile++;<br \/>\n    ibfile++;<br \/>\n    if (document.getElementById('moreb').title.indexOf(\\\"file '\\\" + fn.replace(String.fromCharCode(34),'').replace(String.fromCharCode(34),'') + \\\"'\\\") == -1) {<br \/>\n    document.getElementById('moreb').title+=String.fromCharCode(10) + \\\"file '\\\" + fn.replace(String.fromCharCode(34),'').replace(String.fromCharCode(34),'') + \\\"'\\\";<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; available to call from child iframes via <i>parent.takeoneoff();<\/i> (from voiceover.php second PHP call) and <i>parent.organizefilenamesize(files[ij].name, files[ij].size);<\/i> (from client_browsing.htm) respectively, to facilitate a progress cursor on the submit button to remind the user we&#8217;d like more time.   Along the way, too, <font color=blue>we found<\/font> &#8230;<\/p>\n<p><code><br \/>\nffmpeg -f concat <font color=blue>-safe 0<\/font> -i list.txt -c copy out.mp4<br \/>\n<\/code><\/p>\n<p> &#8230; thanks to the excellent advice we found <a target=_blank title='Excellent advice' href='https:\/\/nono.ma\/says\/concat-unsafe-file-name-operation-not-permitted'>at this webpage<\/a>.<\/p>\n<p>You can see this work in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php------GETME\">voiceover.php<\/a> PHP (we&#8217;d want you to download to a local <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> Apache web server&#8217;s Document Root folder and which you can <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\">run that PHP there<\/a>).<\/p>\n<p id=pdefence><b><i>Did you know?<\/i><\/b><\/p>\n<p>Just like the use of &#8230;<\/p>\n<ul>\n<li>div <a target=_blank title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a>=true<\/li>\n<li><a target=_blank title='HTML span element information from W3schools' href='https:\/\/www.w3schools.com\/tags\/tag_span.asp'>span<\/a><sub>izing<\/sub> within that div<\/li>\n<li><a target=_blank title='HTML DOM innerText property info from W3schools'  href='https:\/\/www.w3schools.com\/jsref\/prop_node_innertext.asp'>innerText<\/a><\/li>\n<\/ul>\n<p> &#8230; are the <a target=_blank title='Trios' href='https:\/\/facts.net\/famous-trios\/'>SpongeBob, Patrick, and Squidward<\/a> of the online woooorrrrllllddd, in an &#8220;offence&#8221; line of &#8220;piecing together an operating system command&#8221; thinking, thinking &#8220;defence&#8221; regarding this we added one <font size=1>(we were pleasantly surprised to discover worked, so as)<\/font> to have &#8230;<\/p>\n<ul>\n<li>div contenteditable=true<\/li>\n<li>span<sub>izing<\/sub> within that div<\/li>\n<li>innerText<\/li>\n<li>mask off parts the programmer wants left untouched via span contenteditable=false<\/li>\n<\/ul>\n<p> &#8230; being like the Hall and Oates meets Everything But the Girl <font size=1>(on a yacht, <a target=_blank title='?' href='https:\/\/en.wikipedia.org\/wiki\/Yacht_rock'>of course<\/a>)<\/font> step back into the &#8217;80s!<\/p>\n<p>Take a look at <font color=blue>some tweaks<\/font> &#8230;<\/p>\n<p><code><br \/>\n   if (newv == 'Burn subtitles') {<br \/>\n       document.getElementById('moreb').innerHTML=firstdivih;<br \/>\n       <font color=blue>\/\/<\/font>document.getElementById('precmds').innerHTML=document.getElementById('verb').innerHTML + ' ' + document.getElementById('secondi').innerHTML.replace(\/inva\\.mp4\/g,'sub.srt      ') + ' sub.ass; ';<br \/>\n       document.getElementById('precmds').innerHTML=document.getElementById('verb').innerHTML + ' ' + document.getElementById('secondi').innerHTML.replace(\/inva\\.mp4\/g,'sub.srt      ') + ' <font color=blue>&lt;span id=subass contenteditable=false&gt;<\/font>sub.ass;<font color=blue>&lt;\/span&gt;<\/font> ';<br \/>\n       document.getElementById('secondi').innerHTML='';<br \/>\n       <font color=blue>\/\/<\/font>document.getElementById('sswitches').innerHTML='-vf ass=sub.ass';<br \/>\n       document.getElementById('sswitches').innerHTML='-vf<font color=blue>&lt;span id=asssubass contenteditable=false&gt;<\/font> ass=sub.ass <font color=blue>&lt;\/span&gt;<\/font>';<br \/>\n       document.getElementById('mysub').value=newv;<br \/>\n    }<br \/>\n<\/code><\/p>\n<p> &#8230; in a &#8220;Burn subtitles&#8221; relevant Javascript code snippet.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-concat-demuxer-tutorial\/'>Ffmpeg Concat Demuxer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fbst'>Previous relevant <a target=_blank title='Ffmpeg Burn Subtitles Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-burn-subtitles-tutorial\/'>Ffmpeg Burn Subtitles Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Ffmpeg Burn Subtitles Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ffmpeg_first_suboption.jpg\" title=\"Ffmpeg Burn Subtitles Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Ffmpeg Burn Subtitles Tutorial<\/p><\/div>\n<p>The initial inspiration for this current <a target=_blank title='ffmpeg' href='https:\/\/www.ffmpeg.org\/'>ffmpeg<\/a> themed series of blog posting was, and still is, <a target=_blank href='https:\/\/gist.github.com\/steven2358\/ba153c642fe2bb1e47485962df07c730'>Mux Video and Audio from another Video<\/a>, thanks.  So many great ideas, we found, that today we add onto the &#8230;<\/p>\n<ul>\n<li>first idea of <i>Voiceovers<\/i> we&#8217;ve established to work with MAMP in macOS and Windows over the previous days, allowing us to now think to add a first suboption idea of &#8230;<\/li>\n<li><i>Burn subtitles<\/i> &#8230; as per our link&#8217;s &#8230;<br \/>\n<blockquote cite='https:\/\/gist.github.com\/steven2358\/ba153c642fe2bb1e47485962df07c730'><p>\nBurn subtitles<br \/>\nUse the libass library (make sure your ffmpeg install has the library in the configuration &#8211;enable-libass).<br \/>\n<br \/>\nFirst convert the subtitles to .ass format:<br \/>\n<br \/>\nffmpeg -i sub.srt sub.ass<br \/>\nThen add them using a video filter:<br \/>\n<br \/>\nffmpeg -i in.mp4 -vf ass=sub.ass out.mp4<\/p><\/blockquote>\n<\/li>\n<\/ul>\n<p> &#8230; as a useful video piece of functionality we&#8217;d say.<\/p>\n<p>To get this going, easily (from a programming perspective) &#8230;<\/p>\n<ul>\n<li>our textarea element remains as the form conduit to the ffmpeg command via the <a target=_blank title='Javascript onsubmit event information from W3schools' href='https:\/\/www.w3schools.com\/tags\/ev_onsubmit.asp'>onsubmit<\/a> event final analysis of the &#8230;<\/li>\n<li>underlying div contenteditable=true is <font color=blue>&#8220;spanned&#8221; up a lot more<\/font> as per &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n   document.getElementById('moreb').innerHTML='<font color=blue>&lt;span id=precmds&gt;&lt;\/span&gt;<\/font><font color=blue>&lt;span id=verb&gt;<\/font>ffmpeg\" . $ffmpegsuf . \"<font color=blue>&lt;\/span&gt;<\/font> -i &lt;span id=scbi&gt;&lt;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=9075964842271&left=y\\\"&gt;&lt;\/iframe&gt;&lt;\/span&gt;<font color=blue> &lt;span id=betweenis&gt;&lt;\/span&gt;<\/font> <font color=blue>&lt;span id=secondi&gt;<\/font>-i &lt;span id=scbix&gt;&lt;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=9075964842271&right=y\\\"&gt;&lt;\/iframe&gt;&lt;\/span&gt;<font color=blue>&lt;\/span&gt;<\/font> <font color=blue>&lt;span id=sswitches&gt;<\/font>-c copy -map 0:v:0 -map 1:a:0 -shortest<font color=blue>&lt;\/span&gt;<\/font> out.mp4 &gt; &lt;a target=_blank title=ffm.bad onclick=getvb(); style=cursor:pointer;text-decoration:underline; data-href=.\/ffm.bad&gt;ffm.bad&lt;\/a&gt;';<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<br \/>\n &#8230; and at the onsubmit event Javascript the <a target=_blank title='DOM innerText attribute' href='https:\/\/www.w3schools.com\/jsref\/prop_node_innertext.asp'>innerText<\/a> attribute usage makes it fairly easy <font color=blue>to say<\/font> &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  function mergechanges() {<br \/>\n     if (document.getElementById('scbi').innerHTML.indexOf('&lt;') == -1) {<br \/>\n       <font color=blue>if (document.getElementById('precmds').innerHTML != '') {<br \/>\n       document.getElementById('fcommand').value=document.getElementById('moreb').innerText;<br \/>\n       } else {<\/font><br \/>\n       document.getElementById('fcommand').value=document.getElementById('fcommand').value.replace(' inv.mp4 ', ' ' + document.getElementById('scbi').innerHTML + ' ');<br \/>\n       <font color=blue>}<\/font><br \/>\n       \/\/alert('not oops ' + document.getElementById('fcommand').value);<br \/>\n     } \/\/else {<br \/>\n       \/\/alert('oops');<br \/>\n     \/\/}<br \/>\n     if (document.getElementById('scbix').innerHTML.indexOf('&lt;') == -1) {<br \/>\n       \/\/alert('zoops');<br \/>\n       document.getElementById('fcommand').value=document.getElementById('fcommand').value.replace(' inva.mp4 ', ' ' + document.getElementById('scbix').innerHTML + ' ');<br \/>\n     }<br \/>\n     if (document.getElementById('moreb').innerText.indexOf(' -c ') != -1 && document.getElementById('fcommand').value.indexOf(' -c ') != -1) {<br \/>\n      \/\/alert('azoops');<br \/>\n      if (document.getElementById('moreb').innerText.split(' -c ')[1] != document.getElementById('fcommand').value.split(' -c ')[1]) {<br \/>\n       \/\/alert('bzoops');<br \/>\n       document.getElementById('fcommand').value=document.getElementById('fcommand').value.split(' -c ')[0] + ' -c ' + document.getElementById('moreb').innerText.split(' -c ')[1];<br \/>\n      }<br \/>\n     }<br \/>\n     return true;<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<br \/>\n &#8230; to slice through that &#8220;span&#8221; complexity like margarine <font size=1>(or butter that&#8217;s been left out on a hot day for approximately 7 hours 17 minutes 23 seconds)<\/font>\n<\/li>\n<\/ul>\n<p>And so, onto yesterday&#8217;s <a title='Ffmpeg Improved Windows Media Browsing Tutorial' href='#fiwmbt'>Ffmpeg Improved Windows Media Browsing Tutorial<\/a> feel free to see this in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php----GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php----GETME\">voiceover.php<\/a> PHP (we&#8217;d want you to download to a local <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> Apache web server&#8217;s Document Root folder and which you can <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\">run that PHP there<\/a>).<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-ffmpeg-improved-windows-media-browsing-tutorial\/'>Ffmpeg Improved Windows Media Browsing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fiwmbt'>Previous relevant <a target=_blank title='Ffmpeg Improved Windows Media Browsing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-improved-windows-media-browsing-tutorial\/'>Ffmpeg Improved Windows Media Browsing Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Ffmpeg Improved Windows Media Browsing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover_windows_dir.jpg\" title=\"Ffmpeg Improved Windows Media Browsing Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Ffmpeg Improved Windows Media Browsing Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Ffmpeg Mux Video and Audio Windows Media Browsing Tutorial' href='#fmvawmbt'>Ffmpeg Mux Video and Audio Windows Media Browsing Tutorial<\/a> taught us a lesson, as a side issue, that what we said when we presented <a target=_blank title='Animated GIF Creation on Windows MAMP via PDF Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-creation-on-windows-mamp-via-pdf-tutorial\/'>Animated GIF Creation on Windows MAMP via PDF Tutorial<\/a>  &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-creation-on-windows-mamp-via-pdf-tutorial\/'>\n<p>No matter how we tried, we could not get a Windows command line command like &#8230;<\/p>\n<p>\n<code><br \/>\nforfiles \/P \"[PathToFileBestGuess]\" \/S \/M \"[FileBaseName]\" \/C \"cmd \/c echo @path@fsize\" | find \"[FileSizeInBytes]\"<br \/>\n<\/code><br \/>\n<\/p>\n<p> &#8230; to work out a file path when supplied a file base name and a file size and you call as above with starting folders.  That works well (for deriverability <font size=1>(if that is a word!)<\/font>) in the &#8220;cmd&#8221; window but not when called under the auspices of PHP exec or shell_exec.  It could be that you lose a lot of a Windows user environment when asking PHP to do some operating system work.<\/p>\n<\/blockquote>\n<p> &#8230; was &#8220;only partially&#8221; the story.  We found out that that &#8221; | find &#8221; command piping could cause problems on Windows MAMP using shell_exec or exec to do some operating system functionality.  But before your enthusiasm oozes over the edges, Windows &#8220;forfiles&#8221; is still very hard to get working with PHP shell_exec or exec, even using PHP to perform that &#8221; | find &#8221; filtering of results.<\/p>\n<p>However, on revisiting the issue in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php---GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php---GETME\">voiceover.php<\/a> PHP (we&#8217;d want you to download to a local <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> Apache web server&#8217;s Document Root folder and which you can <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\">run that PHP there<\/a>) there were dual purpose motivations going on, for us, because <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php--------------------------------------------------------------------------GETME'>our changed animated GIF creator<\/a> PHP <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php--------------------------------------------------------------------------GETME'>tutorial_to_animated_gif.php<\/a> <font size=1>(that if you download to MAMP would best go to Document Root PHP\/animegif folder along with the wonderful <a target=_blank title='GIFEncoder.class.php' href='https:\/\/gist.github.com\/Xeoncross\/ecccb07454d0b69d9eba'>GIFEncoder.class.php<\/a> &#8230; thanks)<\/font> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php'>inhouse animated GIF creator web application<\/a> and <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/php_calls_pdfimages.php----------------GETME\">the changed PDF parts to animated GIF creation helper<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_calls_pdfimages.php----------------GETME\">php_calls_pdfimages.php<\/a> <font size=1>(also a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_calls_pdfimages.php\">standalone proposition<\/a>)<\/font> PHP code could be fixed up at the same time, with a new PHP <i>ourshell_exec<\/i> function <font color=blue>interventional code snippet<\/font> up at the top &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\nfunction ourshell_exec($onea, $twoa = NULL, $threea = NULL) {<br \/>\n   $folder='';<br \/>\n   $pattern='';<br \/>\n   $size='';<br \/>\n   $filesa=[];<br \/>\n   if (PHP_OS =='WINNT' || PHP_OS =='WIN32' || PHP_OS =='Windows' || (strpos(('~@!' . $onea), '~@!forfiles \/P \"') !== false && strpos(('~@!' . $onea), '\/M \"') !== false && strpos(('~@!' . $onea), 'find \"') !== false)) {<br \/>\n     <font color=blue>$folder=explode('\"', explode('forfiles \/P \"', $onea)[1])[0]; \/\/ . substr(DIRECTORY_SEPARATOR . DIRECTORY_SEPARATOR, 0, 1);<br \/>\n     if (7 == 7) {<br \/>\n       $folder=explode('\"', explode('forfiles \/P \"', $onea)[1])[0]; \/\/ . substr(DIRECTORY_SEPARATOR . DIRECTORY_SEPARATOR, 0, 1);<br \/>\n       $pattern=explode('\"', explode('\/M \"', $onea)[1])[0];<br \/>\n       $size=explode('\"', explode('find \"', $onea)[1])[0];<br \/>\n       $thiscmd=trim(explode(\" | find \", $onea)[0]);<br \/>\n       if (strpos($pattern, ' ') === false) {  $thiscmd=str_replace('\/M \"' . $pattern . '\"', '\/M ' . $pattern, $thiscmd);  }<br \/>\n       if (strpos($folder, ' ') === false) {  $thiscmd=str_replace('\/P \"' . $folder . '\"', '\/P ' . $folder, $thiscmd);  }<br \/>\n       if (strpos($thiscmd, '\"cmd \/c ') !== false && substr($thiscmd,-1,1) != '\"') { $thiscmd.='\"'; }<br \/>\n       if (strpos($thiscmd, \"\/P C:\\\\ \") !== false) {<br \/>\n            if (strpos($thiscmd, \"\/P C:\\\\ \") !== false) {<br \/>\n                     if (strpos($pattern, \" \") === false) {<br \/>\n                            $thiscmd=\"DIR C:\\\\\" . $pattern . \" \/S \/-C\";<br \/>\n                     } else {<br \/>\n                            $thiscmd=\"DIR \\\"C:\\\\\" . $pattern . \"\\\" \/S \/-C\";<br \/>\n                     }<br \/>\n            }<br \/>\n       }<br \/>\n\/\/file_put_contents('xxx.xxx',file_get_contents('xxx.xxx'). \"\\n\" . '' . $size . ' ' . $thiscmd);<br \/>\n       $nofind=shell_exec($thiscmd . ' 2&gt; nul');<br \/>\n<br \/>\n\/\/file_put_contents('xxxx.xxxx',file_get_contents('xxxx.xxxx'). \"\\n\" . '' . $size . ' ' . $nofind);<br \/>\n\/\/exit;<br \/>\n       $findings=explode(\"\\n\", $nofind);<br \/>\n       $bitbefore='';<br \/>\n       for ($ifindgs=0; $ifindgs&lt;sizeof($findings); $ifindgs++) {<br \/>\n         if (strpos(str_replace(\"\\r\",\"\",$findings[$ifindgs]), 'Directory of ') !== false) {<br \/>\n             $bitbefore=explode('Directory of ', str_replace(\"\\r\",\"\",$findings[$ifindgs]))[1] . \"\\\\\";<br \/>\n         }<br \/>\n         if (strpos((str_replace(\"\\r\",\"\",$findings[$ifindgs]) . '~'), $size . '~') !== false) {<br \/>\n            return str_replace('~','',str_replace($size . '~', '', (str_replace(\"\\r\",\"\",$findings[$ifindgs]) . '~')));<br \/>\n         } else if (strpos((str_replace(\"\\r\",\"\",$findings[$ifindgs]) . ''), $size . ' ') !== false) {<br \/>\n\/\/file_put_contents('xxxxx.xxxxx',$bitbefore . explode($size . ' ', (str_replace(\"\\r\",\"\",$findings[$ifindgs]) . ''))[1]);<br \/>\n           return $bitbefore . explode($size . ' ', (str_replace(\"\\r\",\"\",$findings[$ifindgs]) . ''))[1];<br \/>\n         }<br \/>\n       }<br \/>\n       if ($folder == \"C:\\\\\") { return ''; }<br \/>\n     }<\/font><br \/>\n\/\/ more code<br \/>\n\/\/ as per usual<br \/>\n\/\/ stays here ...<br \/>\n   }<br \/>\n   return shell_exec($onea, $twoa, $threea);<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; where we substitute in Windows <i>DIR C:\\ \/S \/-C<\/i> thinking in place of <i>forfiles<\/i> (via shell_exec minus the &#8221; | find &#8221; piping, <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg'>that is<\/a>).<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-burn-subtitles-tutorial\/'>Ffmpeg Burn Subtitles Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fmvawmbt'>Previous relevant <a target=_blank title='Ffmpeg Mux Video and Audio Windows Media Browsing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-mux-video-and-audio-windows-media-browsing-tutorial\/'>Ffmpeg Mux Video and Audio Windows Media Browsing Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Ffmpeg Mux Video and Audio Windows Media Browsing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover_windows.jpg\" title=\"Ffmpeg Mux Video and Audio Windows Media Browsing Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Ffmpeg Mux Video and Audio Windows Media Browsing Tutorial<\/p><\/div>\n<p>You know it&#8217;s &#8220;Intranet feely land&#8221;?<\/p>\n<p>You look out the train window <font size=1>(tee hee)<\/font> and see macOS racing through their usual routine.<\/p>\n<p>Of course you&#8217;ll pick the buffet car containing the rice bubbles ahead of the vegemite corn flakes?!<\/p>\n<p>But do we need to reiterate that in &#8220;Intranet feely land&#8221; you&#8217;ve got your macOS typ<strike>os<\/strike>e of work not suiting <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=7PUtiIFOsrs'>&#8220;arch Windows&#8221;<\/a> methodologies?  Take the case of &#8230;<\/p>\n<blockquote><p>\nAt least, with macOS MAMP there is the excellent command line <a target=_blank title='macOS file command' href='https:\/\/ss64.com\/osx\/file.html'>&#8220;file&#8221;<\/a> we can use to show information about some potential input files you could use in this, so far, user unfriendly, &#8220;first draft&#8221; version of the PHP.\n<\/p><\/blockquote>\n<p> &#8230; to the beach, would be nice &#8230; but we digress.  Well, in any case, we asked Google <font size=1>(not via the &#8220;arch Window&#8221;)<\/font> <a target=_blank title='Google search, thanks' href='https:\/\/www.google.com\/search?q=does+windows+have+the+equivalent+of+linux+file+command&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=does+windows+have+the+equivalent+of+linux+file+command&#038;aqs=chrome..69i57j33i160l2.15353j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>does windows have the equivalent of linux file command&#8221;<\/a> and got to the helpful <a target=_blank title=Useful href='https:\/\/superuser.com\/questions\/272338\/what-is-the-equivalent-to-the-linux-file-command-for-windows' title='What is the equivalent to the Linux File command for windows? - Super User'>What is the equivalent to the Linux File command for windows? &#8211; Super User<\/a>, thanks, and then ended up at the really useful <a target=_blank title='Really useful' href='https:\/\/gnuwin32.sourceforge.net\/packages\/file.htm'>third party &#8220;file.exe&#8221; for <font size=1>(non-arch)<\/font> Windows usage<\/a> and proceeded with it, working off  <a title='Ffmpeg Mux Video and Audio Media Browsing Tutorial' href='#fmvambt'>Ffmpeg Mux Video and Audio Media Browsing Tutorial<\/a>, to start being able to develop this &#8220;reveal&#8221; details\/summary arrangement in either macOS or Windows <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> environments, that &#8220;ffmpeg&#8221; voiceover command, which normally works a lot better than &#8230;<\/p>\n<blockquote><p>\nI command thee mux, hey you, with audible you, over yonder, by dale and meadow be, yea!\n<\/p><\/blockquote>\n<p> &#8230; when it occurred to us we could turn the base filename parts of those &#8220;file<sub>.exe<\/sub>&#8221; reports into links that when clicked mapped those clicked files into place into the &#8220;ffmpeg&#8221; command being developed above (as alternative input file designator idea to browsing or div contenteditable=true typing ways), in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php--GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php--GETME\">voiceover.php<\/a> PHP (we&#8217;d want you to download to a local <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> Apache web server&#8217;s Document Root folder) and which you can <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\">run that PHP there<\/a>.<\/p>\n<p>And so, we reckon the work day got worth it!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-ffmpeg-mux-video-and-audio-media-browsing-tutorial\/'>New Ffmpeg Mux Video and Audio Media Browsing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fmvambt'>Previous relevant <a target=_blank title='Ffmpeg Mux Video and Audio Media Browsing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-mux-video-and-audio-media-browsing-tutorial\/'>Ffmpeg Mux Video and Audio Media Browsing Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Ffmpeg Mux Video and Audio Media Browsing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover_more.jpg\" title=\"Ffmpeg Mux Video and Audio Media Browsing Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Ffmpeg Mux Video and Audio Media Browsing Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='Ffmpeg Mux Video and Audio Primer Tutorial' href='#fmvapt'>Ffmpeg Mux Video and Audio Primer Tutorial<\/a> &#8230;<\/p>\n<blockquote><p>\nThere be a flowerin&#8217; of inner warmth and glo&#8217; towards all our readers, youngins and oldins alike &#8230; like!\n<\/p><\/blockquote>\n<p>Yes, we&#8217;re involving good ol&#8217; HTML5 <a target=_blank title='Great link' href='http:\/\/www.html5rocks.com\/en\/tutorials\/file\/dndfiles\/'>File API<\/a> Object Javascript logic, so our &#8220;Intranet&#8221; savvy downloaders out there &#8230;<\/p>\n<blockquote><p>\nFull o&#8217; inner warmth and glo&#8217; towards each other &#8230; like!\n<\/p><\/blockquote>\n<p> &#8230; can easily browse for their two media input files, and for the first time ever integrating <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html-------------------------------GETME\">our ever tweaked<\/a> inhouse <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html-------------------------------GETME\">client_browsing.htm<\/a> <font size=1>(also a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm\">standalone proposition<\/a>)<\/font> (we&#8217;d like you to download to MAMP Document Root&#8217;s HTMLCSS subfolder) we add <a target=_blank title='Event oncontextmenu information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/obj_mouseevent.asp'>&#8220;oncontextmenu&#8221;<\/a> event changes to its input type=file browser <font color=blue>hosting parent iframe element onload event Javascript function as per <\/font> &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  var voaf='', voaftwo='';<br \/>\n<br \/>\n  function checkif(iois, ival) {<br \/>\n    if (iois.src.indexOf('?d=') != -1) {<br \/>\n    var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    if (aconto != null) {<br \/>\n       if (aconto.document) { aconto = aconto.document; }<br \/>\n       if (aconto.getElementById('files')) {<br \/>\n         if (voaf == '') {<br \/>\n         voaf=iois.src;<br \/>\n         iois.setAttribute('data-parentspan', 's' + ival.replace('inv.mp4','cbi').replace('inva.mp4','cbix'));<br \/>\n         document.getElementById('myh1').title='s' + ival.replace('inv.mp4','cbi').replace('inva.mp4','cbix');<br \/>\n         document.getElementById('myh1').setAttribute('data-url', iois.src);<br \/>\n         setInterval(voaff, 1000);<br \/>\n         } else if (voaftwo == '') {<br \/>\n         voaftwo=iois.src;<br \/>\n         iois.setAttribute('data-parentspan', 's' + ival.replace('inv.mp4','cbi').replace('inva.mp4','cbix'));<br \/>\n         document.getElementById('myh3').title='s' + ival.replace('inv.mp4','cbi').replace('inva.mp4','cbix');<br \/>\n         document.getElementById('myh3').setAttribute('data-url', iois.src);<br \/>\n         \/\/alert(iois.id + ' data-parentspan=' + iois.getAttribute('data-parentspan'));<br \/>\n         }<br \/>\n         \/\/alert(iois.id + ' data-parentspan=' + iois.getAttribute('data-parentspan'));<br \/>\n         aconto.getElementsByTagName('h1')[0].style.opacity='0.0';<br \/>\n         \/\/alert('here');<br \/>\n         aconto.getElementById('files').style.position='absolute';<br \/>\n         aconto.getElementById('files').style.left='0px';<br \/>\n         aconto.getElementById('files').style.top='0px';<br \/>\n         aconto.getElementById('files').style.zIndex='99';<br \/>\n         aconto.getElementById('files').style.marginLeft='10px';<br \/>\n         aconto.getElementById('files').style.marginTop='8px';<br \/>\n         aconto.getElementById('files').style.visibility='visible';<br \/>\n         aconto.getElementById('files').style.display='block';<br \/>\n         aconto.getElementById('files').style.backgroundColor='#eeeeee';<br \/>\n         aconto.getElementById('files').setAttribute('data-hostcont', ival);<br \/>\n         aconto.getElementById('files').setAttribute('data-hostspan', 's' + ival.replace('inv.mp4','cbi').replace('inva.mp4','cbix'));<br \/>\n         <font color=blue>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><br \/>\n         if (ival == 'inv.mp4') {<br \/>\n           aconto.getElementById('files').accept='video\/*';<br \/>\n           aconto.getElementById('files').title='Click to browse for video else right click or two finger gesture to make disappear.';<br \/>\n         } else {<br \/>\n           aconto.getElementById('files').accept='video\/*,audio\/*';<br \/>\n           aconto.getElementById('files').title='Click to browse for video or audio else right click or two finger gesture to make disappear.';<br \/>\n         }<br \/>\n         \/\/alert('there');<br \/>\n         aconto.getElementById('dwstyle').innerHTML+=\\\"&lt;style&gt; #files::before { content: '\\\" + ival + \\\"'; } &lt;\/style&gt;\\\";<br \/>\n       }<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; to allow a user who prefers the overlayed <strong>div contenteditable=true alternative (which speaks back to the HTML form textarea conduit when that form&#8217;s <a target=_blank title='Event oncontextmenu information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_onsubmit.asp'>&#8220;onsubmit&#8221;<\/a> <font color=purple>event is called<\/font>) onto yesterday&#8217;s <i>exclusively textarea<\/i> methodology<\/strong> &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  function overlay() {<br \/>\n   var rect=document.getElementById('fcommand').getBoundingClientRect();<br \/>\n   document.getElementById('moreb').style.position='absolute';<br \/>\n   document.getElementById('moreb').style.left='' + rect.left + 'px';<br \/>\n   document.getElementById('moreb').style.top='' + rect.top + 'px';<br \/>\n   document.getElementById('moreb').style.width='96%'; \/\/' + rect.width + 'px';<br \/>\n   document.getElementById('moreb').style.height='' + rect.height + 'px';<br \/>\n   document.getElementById('moreb').style.border='1px solid black';<br \/>\n   document.getElementById('moreb').style.paddingLeft='20px';<br \/>\n   document.getElementById('moreb').style.backgroundColor='#f9f9f9';<br \/>\n   document.getElementById('fcommand').style.opacity='0.0';<br \/>\n   document.getElementById('moreb').innerHTML='ffmpeg\" . $ffmpegsuf . \" -i &lt;span id=scbi&gt;&lt;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\\\"&gt;&lt;\/iframe&gt;&lt;\/span&gt; -i &lt;span id=scbix&gt;&lt;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\\\"&gt;&lt;\/iframe&gt;&lt;\/span&gt; -c copy -map 0:v:0 -map 1:a:0 -shortest out.mp4 &gt; voiceover.bad';<br \/>\n  }<br \/>\n<br \/>\n  <font color=purple>function mergechanges() {<br \/>\n     if (document.getElementById('scbi').innerHTML.indexOf('&lt;') == -1) {<br \/>\n       document.getElementById('fcommand').value=document.getElementById('fcommand').value.replace(' inv.mp4 ', ' ' + document.getElementById('scbi').innerHTML + ' ');<br \/>\n       \/\/alert('not oops ' + document.getElementById('fcommand').value);<br \/>\n     } \/\/else {<br \/>\n       \/\/alert('oops');<br \/>\n     \/\/}<br \/>\n     if (document.getElementById('scbix').innerHTML.indexOf('&lt;') == -1) {<br \/>\n       document.getElementById('fcommand').value=document.getElementById('fcommand').value.replace(' inva.mp4 ', ' ' + document.getElementById('scbix').innerHTML + ' ');<br \/>\n     }<br \/>\n     if (document.getElementById('moreb').innerText.indexOf(' -c ') != -1 && document.getElementById('fcommand').value.indexOf(' -c ') != -1) {<br \/>\n      if (document.getElementById('moreb').innerText.split(' -c ')[1] != document.getElementById('fcommand').value.split(' -c ')[1]) {<br \/>\n       document.getElementById('fcommand').value=document.getElementById('fcommand').value.split(' -c ')[0] + ' -c ' + document.getElementById('moreb').innerText.split(' -c ')[1];<br \/>\n      }<br \/>\n     }<br \/>\n     return true;<br \/>\n  }<\/font><br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; reign supreme collecting their media file specification information in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php-GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php-GETME\">voiceover.php<\/a> PHP (we&#8217;d want you to download to a local <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> Apache web server&#8217;s Document Root folder) and which you can <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\">run that PHP there<\/a>.<\/p>\n<p>The previous work of <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-creation-install-paths-tutorial\/' title='Animated GIF Creation Install Paths Tutorial'>Animated GIF Creation Install Paths Tutorial<\/a>&#8216;s thread of blog postings has been a great help with this ffmpeg &#8220;Intranet feeling&#8221; integration work we use, around here, in conjunction with macOS or Windows operating system <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> Apache local web server environments.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-mux-video-and-audio-media-browsing-tutorial\/'>Ffmpeg Mux Video and Audio Media Browsing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fmvapt'>Previous relevant <a target=_blank title='Ffmpeg Mux Video and Audio Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-mux-video-and-audio-primer-tutorial\/'>Ffmpeg Mux Video and Audio Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Ffmpeg Mux Video and Audio Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.jpg\" title=\"Ffmpeg Mux Video and Audio Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Ffmpeg Mux Video and Audio Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve got another &#8220;Intranet feeling&#8221; PHP web application  &#8220;first draft&#8221; for you today.  The reason we&#8217;re opting for &#8220;Intranet feeling&#8221; (ie. we&#8217;re asking you to download the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php_GETME\">voiceover.php<\/a> PHP to a local <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> Apache web server and <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/voiceover.php\">run the PHP there<\/a> from its Document Root folder) is that we want to further explore the brilliant &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='ffmpeg' href='https:\/\/www.ffmpeg.org\/'>ffmpeg<\/a> -i inv.mp4 -i inva.mp4 -c copy -map 0:v:0 -map 1:a:0 -shortest out.mp4<br \/>\n<\/code><\/p>\n<p> &#8230; we got inspired to try via <a target=_blank href='https:\/\/gist.github.com\/steven2358\/ba153c642fe2bb1e47485962df07c730'>Mux Video and Audio from another Video<\/a> and <a target=_blank href='https:\/\/stackoverflow.com\/questions\/12938581\/ffmpeg-mux-video-and-audio-from-another-video-mapping-issue'>FFMPEG mux video and audio (from another video) &#8211; mapping issue<\/a> &#8230; thanks and thanks &#8230; to add audio to a video stream from two different sources.<\/p>\n<p>At least, with macOS MAMP there is the excellent command line <a target=_blank title='macOS file command' href='https:\/\/ss64.com\/osx\/file.html'>&#8220;file&#8221;<\/a> we can use to show information about some potential input files you could use in this, so far, user unfriendly, &#8220;first draft&#8221; version of the PHP.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d59397' onclick='var dv=document.getElementById(\"d59397\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/video\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59397' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d59407' onclick='var dv=document.getElementById(\"d59407\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ffmpeg\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59407' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d59425' onclick='var dv=document.getElementById(\"d59425\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mamp\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59425' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d59438' onclick='var dv=document.getElementById(\"d59438\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dir\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59438' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d59447' onclick='var dv=document.getElementById(\"d59447\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/subtitle\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59447' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d59454' onclick='var dv=document.getElementById(\"d59454\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59454' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d59472' onclick='var dv=document.getElementById(\"d59472\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/rotation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59472' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d59492' onclick='var dv=document.getElementById(\"d59492\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/imagemagick\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59492' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d59507' onclick='var dv=document.getElementById(\"d59507\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/pandoc\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59507' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d59515' onclick='var dv=document.getElementById(\"d59515\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/select\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59515' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d59526' onclick='var dv=document.getElementById(\"d59526\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59526' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d59540' onclick='var dv=document.getElementById(\"d59540\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/title\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59540' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d59553' onclick='var dv=document.getElementById(\"d59553\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onmouseover\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59553' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d59560' onclick='var dv=document.getElementById(\"d59560\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/linear-gradient\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59560' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d59569' onclick='var dv=document.getElementById(\"d59569\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/swipe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59569' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d60249' onclick='var dv=document.getElementById(\"d60249\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/slide\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60249' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>With our animated GIF creator, last referenced with Ffmpeg Shelling Peas Tutorial, we wanted to nuance the way the ImageMagick and GD effects could operate &#8230; they being only applicable to the entire animated GIF output image &#8230; before today&#8217;s &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-creation-slide-specific-effects-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,12,14,37],"tags":[83,84,1870,1550,1658,932,997,1072,1149,1319],"class_list":["post-60249","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-event-driven-programming","category-tutorials","tag-animated-gif","tag-animation-2","tag-effect","tag-gd","tag-imagemagick","tag-php","tag-programming","tag-rotation","tag-slide","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60249"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=60249"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60249\/revisions"}],"predecessor-version":[{"id":60262,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60249\/revisions\/60262"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=60249"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=60249"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=60249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}