Yesterdayโs Voice Memo Video Presentation Edit Tutorial had us exploring a video editing topic where an image can be overlayed over video content (optionally for a period of time) using the brilliant functionality of command line ffmpeg.
As you can imagine you can watermark a video by placing your watermark into that image. However, some of us may want to express the watermark as you may want it to be, just text. Similar thoughts may be yours regarding how youโd like to see scanned textual data be presented on the way out of the scanning processing.
Our โguinea pigโ of a video today is the โStar Antโ video of Video via Slide Images and Back Again via ffmpeg Primer Tutorial where there, we took a video and used ffmpeg to break that video up into its component image slides (at one second interval, for manageability, but you can buck being โmanageableโ โฆ go on โฆ you know you can do it?!), and then reconstitute a new video from those component parts, again with ffmpeg, after editing a red ringed โStar Antโ on each of those slides.
Hereโs the ffmpeg command we ended up with, via the great help (thanks) from this great link โฆ
ffmpeg -i ants.mp4 -vcodec libx264 -f mp4 -vf drawtext="enable='between(t,0,3)':fontfile=/Applications/MAMP/htdocs/vendor/yiisoft/yii2/captcha/SpicyRice.ttf:text=\"Star Ant Video ... RJM Programming ... August 2018\":fontcolor=white:fontsize=48:x=5:y=80" antpersonal.mp4
โฆ to be able to show you this as Before at Left and After at Right below โฆ
Before โฆ โStar Ant Videoโ โฆ | After โฆ โStar Ant Video Watermarked for 3 Secondsโ |
---|---|
Previous relevant Video via Slide Images and Back Again via ffmpeg Primer Tutorial is shown below.
Reading yesterdayโs LibreOffice Spreadsheet via dBase Primer Tutorial you canโt say I didnโt warn you about my interest in ants (and bees)? Glad you asked?
Did you know?
- the queen ant (often just one per ant colony) is not a leader as such in thinking out strategies โฆ believe it or not โฆ
- it is believed ant colony strategies are worked by what we might call โgroupthinkโ
- ants march in line often and the scent that the ants leave behind is pheromone, that non-leader ants follow off that left behind by the โleader antโ โฆ ie. โleaderโ of position, rather than โleaderโ of hierarchy
So seeing some ants walking in line up a power pole, used an iPhone to capture a very short video (short enough to use the iPhoneโs Photo appโs Share via Mail (attachment) method of emailing to the MacBook Pro, and then (Gmail website) downloading) of this, and later, buck the โantโ trend, and โanthropomorphiseโ a โstar antโ, by honing in on an ant in this video and ring it (and its movement) before creating another โStar Ant Videoโ.
There are video editing approaches you could use, but what got us interested was the thought of โฆ
- break the video into its component parts โฆ just like animations like โBugs Bunnyโ โฆ a series of (slide, or frame) images
- edit those (slide) images to add the (weโve decided should be) red ringing of our โStar Antโ โฆ who weโve decided you, the user can call whatever you so desire โฆ aaaaaaarrrrrrr
- reconstitute a new video from some new (slide) image components
Thatโs where one of our favourite Mac Os X friendly media players, which is also a command line โplayerโ (yayyyyyy!) comes to the fore, for us. Itโs the wonderful ffmpeg which weโve had for a long time now on this MacBook Pro until a disk crash mentioned some weeks back. Could get it back off restore, but decided to reconsitute โฆ
โฆ as a fairly straightforward exercise (given you have Xcode installed already) via a How to install FFmpeg on Mac OS X webpage by Renรฉ Calles, thanks, heaps, we discovered the commands that worked well for us that go โฆ
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install ffmpeg --with-fdk-aac --with-ffplay --with-freetype --with-frei0r --with-libass --with-libvo-aacenc --with-libvorbis --with-libvpx --with-opencore-amr --with-openjpeg --with-opus --with-rtmpdump --with-schroedinger --with-speex --with-theora --with-tools
โฆ to (re)install ffmpeg so that, then โฆ
ffmpeg -i IMG_0738.MOV -r 1 image-%04d.jpeg
โฆ could create those original 7 (slide) images, though the use of a value bigger than 1 frames per second for the โ-rโ switch could be on the cards for your usages.
How to edit those images? We just used the Mac OS X version of PaintBrush and lined a lot of these images side by side across the screen to try to track our โStar Antโ and award it the โRed Ellipse PaintBrush Order of Meritโ (for individualism โฆ tee hee).
Reconstituting the new slides into a new video we remember was another talent of ffmpeg and found this useful webpage, thanks, on the topic of taking raw (slide) images to create a video via ffmpeg. Actually, though, we also had our previous very useful Animated GIF and Video via PHP Writing PHP Data URI Tutorial (presented below) to turn to to end up with the Mac OS X (Terminal session command line command โฆ
ffmpeg -r 1 -i image-%04d.jpg ants.mp4
There are no worries with video file โworkingsโ to do with uppercase and lowercase and names, so we โฆ
cp IMG_0738.MOV ants.mov
โฆ just for some consistency purposes (and could use โmvโ to rename instead) so that we can show you โฆ
Before โฆ | After โฆ โStar Ant Videoโ |
---|---|
See a lot of all these goings on at todayโs PDFslideshow.
Previous relevant Animated GIF and Video via PHP Writing PHP Data URI Tutorial is shown below.
There is a great open source command line application called โFFmpegโ that can create video (or convert video) from image slides (for instance), and so, if we merge functionality for this into yesterdayโs Animated GIF and Slideshow via PHP Writing PHP Data URI Tutorial some โpresentationโ styles that our webapplication can process are now โฆ
- animated GIF
- slideshow
- video
As useful as โFFmpegโ is, it is not necessarily a default application existing on web server operating systems like our rjmprogramming.com.auโs CentOS server. But we do have it on our Mac OS X (MacBook Pro) operating systemโs command line, so we write our PHP determining whether to โฆ
- create the video data there and then via โFFmpegโ and PHPโs exec method โฆ or โฆ
- provide instructions to be able to create the video back at your client computer (that has โFFmpegโ perhaps) โฆ to suit the โฆ
ffmpeg -r 1 -i %03d.jpg video.mp4
โฆ to create a video called video.mp4 with 1 second delays between (input) slides named 001.jpg then 002.jpg then 003.jpg etcetera โฆ thanks useful webpage for the help โฆ that in the command line can sometimes be played via โฆ
open video.mp4
โฆ or used in some HTML as per โฆ
<video controls id=ivideo type='video/mp4'><source src='video.mp4'></source></video>
โฆ that we show you, below, the Mac OS X local MAMP (Apache/PHP/MySql) web server running of todayโs PHP to create โฆ
If you are a regular at this blog and โFFmpegโ sounds a bit familiar to you, thatโs probably because youโve read FFmpeg Image Optimization Primer Tutorial on an earlier occasion โฆ by candlelight โฆ with the lights dimmed?!
See this in the context of how this PHP tutorial_to_animated_gifphp code changed for videos in thisway or try it as a live
run.
Previous relevant Animated GIF and Slideshow via PHP Writing PHP Data URI Tutorial is shown below.
To us, there are great similarities between animated GIFs and slideshows, as two forms of โpresentationโ, and so to extend yesterdayโs Animated GIF via PHP Writing PHP Data URI Tutorial animated GIF creator โPHP Writes PHPโ web application that now has the option for data URI โexportsโ we add the functionality for โฆ
- slideshow creation (using our inhouse methods) which defaults to a horizontal (hashtag type of) navigation โฆ as well as adding a โฆ
- slideshow creation, with Data URI image data, using functionality as if CSS z-index (ie. slides stacked on top of each other in โoverlayโ style) was being used, but actually isnโt โฆ
โฆ that little bit different to another โstackedโ (or z-index feeling) approach we talked about with Multiple Class Slideshow Details Tutorial, where HTML element โclassโ properties were changed so that the last class defined reflects the look of the slideshow slide desired at any given time. We just use an array, and a setTimeout timer to achieve the same ends today, with our work (or โpresentationโ). If this โhorizontal versus stackโ navigation choice interests you, also take a read of HTML Input Element Types Randomized History Tutorial.
Again, with all this added functionality, because it is โhostedโ in an HTML iframe element all the existant web browser (Windows right click or Mac OS X two finger gesture) functionality can come into play, and make life quite interesting for your non-mobile users โcollectingโ data URIs โฆ there are worse hobbies!
You can see this in the context of how this PHP tutorial_to_animated_gifphp code changed for slideshows in thisway or try it as a live
run.
Previous relevant Animated GIF via PHP Writing PHP Data URI Tutorial is shown below.
The previous relevant โPHP writes PHPโ methodology animated GIF creator we talked about, first, with Animated GIF via PHP Writing PHP Primer Tutorial came back to mind yesterday with our Missing Javascript Audio on Unmute Tutorial, where we pondered on whether an animated GIF could be represented on a webpage by a data URI. Why take an interest in this? Data URIs are very important to do with โฆ
- future mobile development web form navigation benefits from their usage
- the use of data URIs make your web pages independent of web server location issues, so make your web data more portable, and flexible
โฆ and ideally, animated GIFs are also not just a decorative part of all this web application usage (as they can be a very efficient representation of an animation that could not be a more succinct way to show that animation or presentation), and if they can be made to be like any other GIF or image data file in the ways they can be represented (and used), then that is all for the good.
So we changed the Jeroen van Wissenโs inspired PHP (โPHP writes PHPโ methodology) code tutorial_to_animated_gifphp code allow for this extra animated GIF data URI representation in a new additional HTML iframe (containing the animegif.html of code below) that when harnessing existant web browser (Windows right click or Mac OS X two finger gesture) functionality can glean for us, as required, that animated GIFโs data URI representation. But donโt get too excited about this being rocket science, in that with a bit of effort, and PHP, it could have been gleaned from what we already produced, in that (in PHP โlandโ) โฆ
$lastbitto="\$fp = fopen('animegif.gif', 'w');
\$data = \$gif->GetAnimation();
\$dataUri = 'data:image/gif;base64,' . base64_encode(\$data);
fwrite(\$fp, \$data);
fclose(\$fp);
\$fp = fopen('animegif.html', 'w');
fwrite(\$fp, '<!doctype html><html><body><h1>Data URI version below<h1><br><h4> ... via web browser (Windows right click, Mac OS X two finger gesture ...</h4><br><img src=' . \"\\n\" . \$dataUri . \"\\n\" . ' title=DataURI></img></body></html>');
fclose(\$fp);";
You can see this in the context of how this PHP code changed in thisway or try it as a liverun.
Previous relevant Animated GIF via PHP Writing PHP Primer Tutorial is shown below.
We find another very useful reason for PHP to write PHP. Today we establish a PHP web application to dynamically create Animated GIF images via some still images, like Gifpal would do.
We have some great open source PHP code to thank for the basis of the functionality we found at Jeroen van Wissenโs very useful link, thanks.
Then we added a more user friendly interface to get the information off the user we need. We present this in an HTML form, which navigates to the same PHP to do the actual assembly of the Animated GIF via techniques where PHP writes PHP โฆ and really needs to, to be useful.
Do you remember, last, when we did some PHP writing PHP functionality โฆ PHP Writes PHP Vertical TextBoxes Primer Tutorial?
And inside the PHP it makes big use of the GD and Image Functions to read and write the image data we assemble via the user information.
This Animated GIF form of animation is the easiest to implement, as it consists of just the one GIF image file, but the user has very little control over the animation settings, such as the delay between stills, one of the settings we ask about in our web application.
Our PHP source code today you could call tutorial_to_animated_gifphp and we redirect you to some live run ideas โฆ
- normal run with HTML form which posts back to itself โฆ live
run
- example GET parameters run (like our tutorial picture)
Hope you find this tutorial useful.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.