Recently stumbled upon a stock video footage site http://www.pond5.com/stock-video-footage/1/*.html , and saw that they had a preview of a video when the user hovered over a thumbnail. I want to recreate this, because it seems like useful practice and it will allow me to workout my web developing muscles.
I would like to be able to preview a video when a user hovers over a thumbnail.
For example like pond5.com. Audio is not necessary, but I would like it to look smooth like a video rather than a video preview that contains a frame every 5 seconds.
On pond5.com, I originally thought they used a gif, but it plays very smoothly. Some also contain audio. As far as I thought, audio can't be used in .GIFs
Is this a case where I would have to just upload a 2nd video for the preview?
Thank you for any help.
Pond5, the website you specifically mentioned, creates a video thumbnail with watermark and lowered quality and stores it. It is then played back using JavaScript to dynamically load a div element that contains the flash player. So no GIFs are involved. You do need to upload a 2nd video, but the steps to this project are as follows:
Server-side video thumbnail/watermarking: Not sure if there are any PHP packages that are up to the task on this one. I would write a more powerful program in C++ or C#. If you go with C#, quick and easy solution would be Microsoft Expression Encoder.
Flash/Silverlight/HTML5 video player: To play the video.
Client-side JavaScript: To load the fancy popup and the aforementioned video player. Note that you might need to use PHP and a database engine to load the thumbnail URL for the video requested.
This is what Pond5, and what many other stock-footage sites use, and the basic outline of what you would need to do to achieve similar results.
Related
So I'm working on a project to fetch images from fashion websites. Now I'm implementing the add item function in the website. In this function, user needs to input website url first, then the web scraper will scrape the target images' url and pass the urls to the curl to download the image. Finally the add item popup window will preview the images I fetched in the previous step and ask the user to fill out some basic information for the items. Everything works fine except that the curl will take a very long time to download the images (cuz the images from those fashion website are often very high-quality). So I'm wondering is there a way I can create a preview without actually downloading the full-size images and do the download when the user fill out basic information later. Thanks!
If the fashion website has smaller versions of the images, you should download those first. You can use them for your preview.
If the fashion website only has the full size image, there is no way to download a smaller version of it.
You probably know what your doing, but remember that you should respect the copyright of images on websites, especially art websites such as fashion websites. Be careful with what you do with them.
I have a requirement which I have been unable to find any solutions too, not many pointers exists on the internet either, couple of video editors I asked are of the opinion that it might not be possible.
Lets say I have a video and I am uploading it to a website, i want a dynamic image to load inside the video at the end of every 30secs, and if possible, then not really sure if I can upload these videos on Youtube or Vimeo either?
Any heads up will be great, I am totally lost here.
I have various video hosts that I like to use on my website. I am trying to code a way to retrieve their video thumbnails.
Most of these video hosts actually have a frame of the video on display before the video starts to play. If it's possible to even get that frame as the thumbnail, that would be great. Most if not all of these video hosts use iframes for embedding.
I am looking for a fairly generic way of retrieving thumbnails for all video hosts that display some type of frame from the video once the video is embedded. If that frame can somehow be retrieved and then turned into an image that can be used that would be amazing. However, I am not exactly sure how to go about doing that.
You'd have to have the actual binary file data. If you have that access, install ffmpeg-php on your server and use this question for further direction: ffmpeg to get screenshot
Depends on the site.
For example, if you have a youtube video
http://www.youtube.com/watch?v=AC2FKbyC28k
then its thumbnail is at
http://i2.ytimg.com/vi/AC2FKbyC28k/mqdefault.jpg
I found this out by right clicking the image thumbnail, opening it in a tab and inspecting the url, so I'm sure you can do this exhaustively for every site ;)
It sounds like what you want is oEmbed, which is supported by most popular video hosting sites (Youtube, Vimeo, ...). There are several PHP oEmbed libraries, which come preconfigured with oEmbed endpoints.
What oEmbed allows you to do is to make a request to the provider (Youtube for example) with the video URL. It will return a JSON response with information about the video. Both Youtube and Vimeo return a thumbnail_url element in the JSON.
I'm looking to build a javascript/jquery gallery that meets the criteria below, and would love to know if there are any existing gallery modules that have all/most of these features:
1. Photo wall with zoom (single view) functionality. eg. http://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/
2. Responsive, so that the photo wall images tile properly for desktop & mobile devices, and reshuffle if the user resizes their browser. eg. http://isotope.metafizzy.co/
3. (optional but desirable). If a user is on a mobile device, allow them to swipe through single-view images.
In a nutshell. A user will go to the thumbnail wall, select an image, and can then either swipe through more enlarged photos, or switch back to the wall.
The photos will be sourced from a folder on the server. Moderators are simply camera girls, who will upload images from their digital cameras to this folder via ftp - They wont resize / optimise the images, so it would be great if this could happen in the process somewhere too.
We are hosting on a PHP / Linux environment.
Have a look at jQuery Mason: http://masonry.desandro.com/
It can be used as a responsive wall.
What your asking for is not called 'zoom' (that is another effect), you seem to what what is called a lightbox. There are a lot of these, here is a comparison, http://planetozh.com/projects/lightbox-clones/
To re-size images your going to have to write some php to make use of image GD or imagemagick, here is a tutorial, http://net.tutsplus.com/tutorials/php/image-resizing-made-easy-with-php/ or possibly a script, http://shiftingpixel.com/2008/03/03/smart-image-resizer/ (or timthumb.php).
For serving them your going to have to write some php with your javascript.
There is no all in one solution for what you asking for, you're going to have to write it or hire someone to do so.
As far as I know you have to create a plugin or write you own jquery functions for getting all customized features.(that will be very good in sense of performance and maintenance)
for zooming functionality you can use some of the modal windows with ajax call or you can create.
to achieve this you have to write good css so that your photo aligned according to screen.reshuffle will be handled if you write good css.
yes you can achieve this by detecting the browser navigator and changing the css and javascript accordingly.
For pre processing images(re sizing,dynamically generating thumbanails) you can opt for php backend solutions.
And no worries you can handle images from folder via Ajax and show them as they requires.
I'm working on a website for a specific client. And he wants to be able to add link to the website, and on mouse hover to have a image of that website appear.
Now, he doesen't want to take an image of the website, he only wants to input the link and have the website do everything else.
So my question is ->
Is there a way (eg. google API) to get a website image only by providing the url via php?
Sort of like in google, when you hover over a lik of a page, a tooltip pops up to the right with an image.
Any help is, as always, appriciated :)
Here is a list of 10 free thumbnail services
http://www.webresourcesdepot.com/10-free-website-thumbnail-generation-services/
You can simply refer to the URLs of these services, e.g.
<img src="http://SnapCasa.com/Get.aspx?code=[code]&size=[size]&url=[url]" />
or make a CURL call from one of your PHP scripts and temporarily store/permanently save the image that was generated.
Have recently developed Thumbnailspro.com. It is currently free to use while in beta testing as we work out the bugs, but so far its getting quite popular, you can request thumbnails directly from your website using the code below :
http://thumbnailspro.com/thumb/http://msn.com&s=150
s=Size, size can be anywhere from 10 to 1000 pixels just add s=300 to display a thumbnail 300 pixels in width. We are trying to add more options as we go for thumbnail requests and at the same time trying to keep it as simple as possible so you don't have to enter something like the code below to get your thumbnails :
http://somethumbnailsite.com/viewurl.php?url=http://msn.com&x=200&y=300&bwidth=1024&bheight=768&rotate=76&what_the_hell%20_is_all_this_crap!
So is much more effecient!
Like the service or have any bugs contact us at admin#thumbnailspro.com!
No. The only way to do this is to request the HTML for the page, render the page and then create a thumbnail from that page render. Google does this because in the process of spidering the web, they already get all that data, and they've got a nice optimized rendering engine (Chrome) that they can put the data through, and then they've got tons of online storage space to store the cached image. There's a lot of work there, though.