I use tumblr to share videos and, unfortunately, when re-posting a video to your tumblelog it uses the embed code at 400x336px. This is neither widescreen nor very large.
So I'm trying to set the player to better size and I'm finding that the youtube player really comes in many sizes. For example, when copying the embed code for and HD video I get the sizes 560x340, 640x385, and 853x505. Then when I look at the embed code for a SD video I get the sizes 425x344, 480x385, and 640x505.
I was having the best luck with setting the player to 640 x 505 as it was large enough for HD and perfect for SD.
print str_replace( array('400', '336'), array('640', '505'), $video_player_html);
Has anyone dealt with trying to find a good standard embed size for a site? One thing that would make this a lot easier is to know whether the video was HD or not - however, that info is not provided in the embed code.
I guess I am actually more interested in knowing the right ratio (or specific size) to use that works the best for youtube's mixed content.
Update
Since HD seems to be .5625 ratio (16/9) I'm thinking that I can just decide on a hight and multiply it by the ratio to get the proper width each time (plus 23px for youtube bar).
You don't have to worry about the sizes youtube offers. When you copy the embed code, paste it into a text editor and you'll see it contains width and height parameters in two places. You can change those values to anything at all and the player will resize. So grab your JRuler, figure out what size would be ideal for your tumblelog, and just edit the player code each time.
It's kind of a pain, but it gets you the result you want.
Related
Overview:
I am working on a video creation project. The technology I am using are: imageMagick, php, ffmpeg.
Current Status:
Currently the project is able to create videos using images and texts and few basic transitions. The way I am doing it is using imagemagick to create gif using input images(with transition effects in them) and then converting all gifs to videos and atlast concatenating the video together.
Next Move (My question):
I am now set to take it to the next level. So, what I am having is a video(1920x1080) with some white frames(1280x720) that keeps shifting in each frame. I want to replace those white frames appearing in some frames of the video with some images(1280x720) that I wish to use. Please see the image here and you will get an idea: These are just two frames from my video. If you can see carefully the images are shifting(white space is not constant).
Expectation:
So, I want to fill those white space with one of my own image. If the case would have been for only one frame I could have used ffmpeg to overlay image on the exact width and height. But here the white space is not fixed and keeps shifting in all the frames and there are a lot of frames. So, I am looking for something like opencv or some other technology that can be used for object detection in a video or in a set of frames and replace the detected area with some other image.
I just need a kick. So, if anyone has already worked on something like this just suggest me what technology can I use. Thanks in advance.
It all depends on exactly what you can assume :
If you can safely assume that your rectangle's boundary is never occluded (hidden) somehow, you can try finding the edges in your image (like OpenCV's Canny edge) and then look for rectangular shape (corners forming a warped rectangle, or the very popular Hough Lines).
If the rectangle you're looking for is always white, you can threshold the image in a colorspace like HSV to look for maximum value (the V in HSV ~ brightness) then rectangular shape search in a binary image.
If your corners are occluded sometimes you'll have to do some tweaking with your image, like morphological operations ("grow and contract" binary thresholded image), then Hough Lines could do the trick.
Note that this answer assumes that once you know where the rectangle is, "you're done", and you just have to overwrite the rectangle with custom content.
I also do not check for any time-continuity : you video frame might jump around based on the frame-by-frame appearance of rectangle. You'd have to include some knowledge about previous positions.
I'm using an image scraping feature developed here: https://github.com/morshedalam/url-scraper-php
They are using this regular expression to find images:
private $img_expression = '/<img[^>]+src=([\'"])?((?(1).+?|[^\s>]+))(?(1)\1)/';
This is fine, however, it returns every single image (including tiny ones). Much like Pinterest, Facebook etc. I'm only interested in getting images that serve as thumbs i.e width > 200px. I realize that the dimensions of an image might not be defined in the html source.
How would you do this?
Cheers.
You need to download the extracted images, get their size and select those that are large enough.
Interestingly, there's an SO answer just for that: php get all the images from url which width and height >=200 more quicker
I have an image which is essentially a star-burst effect. The color of the star-burst is white, and the background is transparent (PNG w/ Alpha). I randomly generate these star-bursts onto an HTML5 canvas at random locations, and at the same time, generate random Hue, Saturation, and Light (HSL) values. These could be RGB values, if this simplifies things.
The goal is to re-colorize the PNG for display on the HTML5 canvas based on the randomly generated HLS values before rendering it to the canvas.
I've read some other posts on StackOverflow and other sites, but the only solutions I've seen involve rendering it to the canvas, grabbing the coordinates for where the image is displaying, and modify the color on a pixel-by-pixel basis. In theory this could work, however some of the images may overlap slightly. Also if there is a background already present, then from what I understand, the background's color would also be modified which isn't much of a solutions for me either.
If this is out of the realm of what Canvases are capable of, as a fallback I suppose I would be okay with having images dynamically re-colored via PHP using GD2 or Imagick, or via the command-line via Gimp, ImageMagick or some other image library...
Thanks much!
-- OUTCOME --
Special thanks to #jing3142 for initial suggestion of off-screen canvas rendering, and #Jarrod for providing the vital piece I was missing: globalCompositeOperation = "source-in"
Here is a working implementation of the concept: http://jsfiddle.net/fwtW2/2/
Works in:
Chrome
Firefox
IE 9 (haven't tested other versions)
How about a second canvas that has the size of the image, place the image on that canvas, re-colour as required, extract re-coloured image and place at random on main canvas, re-colour image on second canvas using new HSL values, extract and randomly place on main canvas and repeat?
This may help as well https://developer.mozilla.org/en-US/docs/HTML/Canvas/Pixel_manipulation_with_canvas
I'm pretty sure you can just use the source-in globalCompositeOperation opertaion? No need to get all hardcore and crazy with vector images.
This code is where the magic happens:
var color = 'red';
ctx.fillStyle = color;
ctx.globalCompositeOperation = "source-in";
But yOu'd need to re-draw this to an offscreen canvas: You can do that like so
createBuffer = function(sizeW, sizeH)
{
buffer = document.createElement('buffer');
bufferCtx = buffer.getContext('2d');
buffer.width = sizeW;
buffer.height = sizeH;
}
then just draw your image to the offscreen canvas and apply the global composition.
Here’s how to easily recolor your starbursts just before rendering on canvas
Convert your starburst.png into a vector path! (I know, you will have to drag out Gimp/Illustrator for this one time—but it’s worth it!)
Starburst paths can have fills and the fills can be solid colors or even gradients—as fancy, random recoloring as you need!
Starburst paths can scale without the pixilation of raster images like .png’s.
Starburst paths can rotate to show diversity in your bursts--and even skew to represent a bit of 3d motion.
If you want to get fancy, you can even create “glowing” bursts by using shadows and blurs.
Starburst paths are faster to render than .png images—especially if you need to manipulate each .png before drawing.
I want to mimic the bing video preview functionality, with a thumbnail preview, then onMouseOver, load and play a video file. I plan to use VideoJS (html5 + flash) for the video playback. I need to use ffmpeg to produce these video files.
How can I create a mp4 preview with video only, which contains 1s of every other minute of the full clip, and shrink resolution to a fixed width (maintaining aspect ratio, preferably with zoom crop) using php + ffmpeg command line?
I'm assuming it can be done somehow along the lines of cutting 1s clips, then combine the smaller clips, and re-encode for a final rescaled output.
*Edit: Using ffmpeg is a design requirement. Pulling out 1s clips, should be fairly easy, but combining them seems to be somewhat complex with ffmpeg. I don't want cycling thumbnails, I want a video preview which contains a number of 1s clips. Eg. runtime in seconds: 100-101, and 200-201 combined in a heavily compressed clip. I am asking for a command line example of how to do this in an efficient manner.
One way to do this in Windows (or wine) would be to use an Avisynth script. This would allow you to do all your desired transformations in one step. It's been a little while since I've used Avisynth but a very simple script might look like:
DirectShowSource("C:\file\to\encode.avi", audio=false) # Or another source filter
SelectRangeEvery(1440, 24) # outputs 24 frames every 1440 frames
BilinearResize(320,240) # resize to your desired resolution
Crop(...) # crop to reach desired aspect ratio
This could be extended to support various framerates and aspect ratios instead of hardcoding everything. The resulting .avs file can then be used as an input file to ffmpeg, provided that it has been compiled with --enable-avisynth.
I've an approach and i think that will work...
Using ffmpeg you can get thumbnails of the video at specific intervals.
So i will take about 5 to 10 thumbnails in the interval of 2 seconds and store them on my server with a unique name that identifies the video.
So when I mouse over i call the function which will load these images sequentially(which makes the user feel the video is fast forwarding..)
But in this format, we can't play sound when we mouse over ..
I don't know whether this is good but i know this will work..
Update:
I think it will be better to create a video using ffmpeg using the extracted images and play them while we mouse over.. This will be quite faster than loading a sequence of images. ffmpeg can be used to create a new video from a list of images.
I managed to do this now, by pulling out 1s clips, and convert them to mpeg. Then combine these mpeg files, by appending them into a single file. Then convert til mpeg file to mp4
I don't know if this is even possible with PHP, but I figured if it is, someone here will know how. I'm currently working on a project where users can customize a full body main avatar to be used throughout the site. There are a bunch of different face, hair, etc transparent png images that can be selected to make their custom avatar. I have this working great, but here is the hard part. I want to be able to use the face, hair, and beard (if male), and automatically create an 80x80 image that will be used as their small avatar for forum posts, etc.
There are a few obstacles with this. First, all of the images are 187x404 (big amounts of the image are transparent, the character body image is achieved by stacking the images, so a face image isn't actually that big). For this to work, the images would effectively have to be automatically cropped so that all of the extra space was removed and the actual face, hair, or beard part showed in the 80x80 spot.
The second issue is that some of the hair or beards (when placed on the full-size face image) would extend past the 80x80 and be chopped off. So the image would have to be pieced together at full size, and then resized to fit in 80x80.
I know the basic way of combining the 3 images into one (Combine 2-3 transparent PNG images on top of each other with PHP), but that is as far as I've gotten. If I'm crazy and this isn't possible then tell me. I'm probably way overcomplicating this, so if you see and obviously easier way to achieving this, I would love to hear it.
I think you need to decide first, cropping, resizing or a combination of both (cropping to a bigger square and resizing that).
Anyway, if you already have the images combined into one, all three options are easy to do in php. Take a look at imagecopyresampled().
The easiest way is just to always fit the face/hair/beard in the same area of the image. Then just crop that area out.
If you must, you can store extra data for each image specifying a rectangle in the image that must be visible in the small avatar. Then take the maximum extremities of these rectangles in all the images you compose, and crop+shrink that down to your small avatar size.
However, be aware that resizing PNG images by a few pixels (e.g. 83x83 -> 80x80) can substantially reduce the quality, particularly for images with lots of defined edges. This is because there are many pixels in the new image that are [nearly] evenly split between 4 pixels from the original image, and in images with sharp edges this leads to blurring.
So, shrinking an image to fit a portrait is not just difficult but also reduces quality. I'd cut off the beard instead!
I may be oversimplifying this, but can you try:
Keep track of max face size dimensions pre-compositing.
Output the composite image to a temporary file.
Crop square of largest values from step 1
Resize cropped image portion to 80 x 80