Google camera makes a so-called 'motion photo', that contains a short, audioless mp4 video clip from before/after taking the photo. This is appended to the JPEG file, its precise location is noted in EXIF tags.
Now I want to show this in my blog. Problem is, I haven't found a single JS gallery that would offer support for this functionality. Short of implementing one myself, is there maybe a solution to (optionally) show the video component of MVIMG files in a browser, upon user interaction (e.g. via click, like in google photos)?
Related
Background:
I'm working on a video project with 50+ short videos (10min, 720p) that I want to present online. My current architecture is to placing 16 video tags in a 4x4 grid, and then randomly setting their source on load using JavaScript, and on click zooming a video to cover the full screen until clicked again.
The problem:
Each video in 720p webm is around 80mb. With 16 videos that is 1.3GB totally, or 130MB per minute, or 2MB per second. Which is a ridiculous amount of data, I think, maybe I'm wrong. The each video is so big (80mb) is to support the zoom-full-screen feature.
My idea for a solution:
Each video in two resolutions, and use the low resolution for the grid layout, and the higher resolution on the click-to-zoom.
My question: How to make this smooth? Can I preload the high resolution video on click in the background at the position of the low resolution video? And make the shift in the CSS transform? Or is there a better way to do this?
Secondary question: How to host this online? Can I put the videos on vimeo maybe? Right now I'm using wordpress.com hosting.
The normal way to achieve something like that is to encode the video using an adaptive bitrate format. The two primary formats for that would either be HLS or MPEG-DASH. Most online encoding platforms can provide those as outputs. Normally you would encode 5-6 different qualities (this helps with users that are on wifi, where bandwidth might constantly be changing) but you could easily encode it in just two different qualities.
Normally the players would be able to select the right quality automatically, but you can manage that yourself if you want.
If you are going to use HLS, you can use hls.js and its Quality Switch API. For MPEG-DASH, a good player to use would be Shaka Player and then set it like this:
player.configure({enableAdaption: false});
player.selectVideoTrack(trackId);
If you want to switch specifically on fullscreen, just listen for the fullscreen events on the players.
Before you say it can't be done please take a look at my train of thought and entertain me.
I have read on stackoverflow that it can't be done and how to implement this using ffmpeg and other stuff on the server side which is great and simpleish enough to comprehend .. ive even used an extensiion to Video.js i found on github that makes this one step easier. But none the less what if I dont have a copy of the <video src=... > and I really dont care to get one?
I Do not want to use a server to do this Okay with that out of the way, I understand thanks to a post from Paul Irish that video playback is not a shared aspect of web-kit ports (the code which powers basically every browser ... minus chrome canary now using blink a webkit fork) This kinda makes sense why certain browsers only support certain video containers.
So for the sake of simplicity: I want to make this functionality only available on Chrome and only MPEG-4 AVC video containers, why can't this be done if some how I can actually view each frame of the video while its playedback?
additional note
So the generating of video thumbnails is possible using by drawing frames to a canvas, this will only be part of a final solution to my problem, I'm looking to do this each and everytime a video is viewed not store images on my server after a first playback is completed by a user. What I would like to eventually work up to is generating a thumbnail as the video is downloaded that can be viewed while a user uses a dragging scrollbar to ff/rw to a point in the video. So this will need to be done as frames of video come available, not once they have been rendered by the browser for user to view
One can actually feed in a video to the canvas, as seen here in HTML5Doctor. Basically, the line that does the magic is:
canvasContext.drawImage(videoElement,0,0,width,height);
Then you can run a timer that periodically retrieves the frames from the canvas. There are 2 options on this one
get raw pixel data
get the base64 encoded data
As for saving, send the data to the server to reconstruct an image using that data, and save to disk. I also suggest you size your canvas and video to the size you want your screenshots to be since the video-canvas transfer automatically manages scaling.
Of course, this is limited by the video formats that are supported by the browser. As well as support for canvas and video.
Generating thumbnails during first render? You'd run into problems with that since:
You can't generate all frames unless it's rendered on the video element.
Suppose you have generated thumbnails during first run and want to use them for further runs. Base64 data is very long, usually 3 times the file size if the image. Raw pixel data array is width x height x 4 in length. The most viable storage candidate is localStorage, which is just 5-10MB depending on the browser.
No way to cache the images generated into the browser cache (there could be a cache hack that I don't know using data-urls).
I suggest you do it on the server instead. It's too much burden and hassle to do in the client side.
I'm looking for a way to upload multiple images with description. Users will be uploading 1-10 images of quite a large size from cameras so it's better if the images get resized before upload.
Requirements:
browser compatible (including mobile browsers and IE), can rely on JavaScript (jQuery)
multiple files either as selection of multiple files in native file manager or at least having to click on some button to bring an input for another file
add a description to each file
resize files before upload (doesn't need to be browser compatible)
uploads on submit
keeps EXIF info or at least extracts GPS coordinates (could do it with some libraries I found)
Bonuses:
can auto-rotate image before upload (using EXIF info)
shows thumbnail of selected image
drag & drop feature
progress bar
I use PHP on backend.
I guess HTML5 canvas might be suitable here. Or some jQuery plugin like blueimp's Jquery-File-Upload. But I don't have experience with more than simple <input type="file">s so I'm asking for your suggestions.
Thanks!
Take a look at Uploadcare. Its widget meets almost all of your requirements out of the box, and you can customize it's behavior to cover remaining.
disclosure: I am one of Uploadcare developers and am posting this not to shamelessly promote the service but because it was built to solve cases like this one.
When you normally right-click over an image displayed on a Web page inside a Web browser, you get a context menu that has a menu item 'Save Image As'.
But if you right click on some images on some websites, the context menu doesn't display items that indicate that the image is one image. Instead, it displays 'View Background Image'.
If you view the background image, it turns out that the web application has one composite image that it has cached and then probably at client side, it slices and dices that image into separate tags.
For example, if you go to any thread on the Writers website of Stack Exchange, like this one:
https://writers.stackexchange.com/questions/3102/how-can-i-make-a-story-bigger
And right-click on the facebook icon and view the background image, you get this image:
http://cdn.sstatic.net/Skins/sketchy/img/sprites-beta.png?v=2
Similarly, if you go to a website that has the shareThis widget, like this:
http://sathyaish.net/
On the extreme top-right corner, there is this shareThis widget image. If you right-click on that image and view the background image, it looks like this:
http://w.sharethis.com/share4x/images/service-icons-sprite.png
1) I want to know what technology is used to achieve this and how may I learn to do it?
2) Secondly, how do I become good at JavaScript? How do I learn all these tricks? Which books should I start reading that will make me good at JavaScript?
See the word "sprite" in both the image urls? That's is what you are looking for.
Sadly, the technique is often used for content images — placing performance over correct HTML.
While you can get general tutorials on CSS Sprites (as Quentin pointed out), you might also want to check GWT ImageBundle Design doc which details how the idea was incorporated into Google Web Toolkit
I would like a user to be able to edit an image that I serve, using Javascript, and then upload that image back into App Engine.
Original image is stored as Blob in DataStore.
Image is served (currently) just using
Currently user can only view the image, but i want user to be able to edit the images (adding text and lines at most, no complex transformation needed).
User can save the image back into the web application.
What is the quickest way to do this?
Will it be easy to integrate with 3rd party javascript image libraries (which has the editing tools already)?
Your starting point (and minimum requirement) for line art (read: not pixels but as you say: text and lines) will be the HTML5 Canvas Object:
http://www.w3schools.com/html5/html5_canvas.asp
Depending on your use case you may want to 'underlay' the pixel image to be decorated.
For saving refer to
http://www.tutorialspoint.com/html5/canvas_states.htm and
How to save HTML5 canvas?
If the end results shall be pixels, Canvas2Image might by for you.
Sorry to just throw general links at you, but since you asked in a general way. Hope this helps.