5 ms·

Show HN: Forget Flash, Skip GIF, Control iOS

155 points by mikewoodworth 14y ago

Aissen 14y ago
So Apple dug a hole by: - not allowing iOS to play videos in-DOM. - deciding not to support WebM, so Firefox users can't see their videos. And now others are following them by helping to dig deeper in a vastly inefficient way of displaying moving images ? What could previously be offloaded to dedicated engines is now going to burn the CPU via JS. Hum, now that's gonna work…
- jackalope 14y ago
  I viewed three examples simultaneously from the Phosphor gallery at http://www.divergentmedia.com/phosphor/gallery http://www.divergentmedia.com/phosphor/gallery and each one only used about 5% CPU, for 15% total. I closed them and viewed a YouTube HTML5 video (no Flash on this machine) and it consistently used 70% CPU. It seems the Phosphor approach is more lightweight than video and it was entirely smooth (on a 2007 dual core MacBook Pro running a 64-bit Linux). If you don't need audio and want to include a video or presentation in your page that doesn't require a plugin and looks to be supported on a wide range of browsers and platforms, this looks like a compelling option.
  - exodust 14y ago
    The image frames in those examples are 250 x 250. There's no sound. It's video deconstructed into frames then those frames animated to re-form a second-rate appearance of the original video. I can't believe it's not butter! Funnily enough it's Flash which is the best performer out of those he lists. Attempting to mask and layer video in HTML5 is a painful scrapheap of half-baked canvas hacking and browser compatibility woes. And then it doesn't work very well anyway even when you finally get the canvas to kick in. Flash eats that kind of thing for breakfast, with easy alpha channels on video layers and so on. I wish Flash would just make a comeback, improve itself as a mobile plugin for browsers, and we can all enjoy rights-restricted video playback in the browser (at least), and clever next gen web games without paying Apple 30%.
- lloeki 14y ago
  > a vastly inefficient way of displaying moving images ? I don't see this as a MP4/WebM replacement (compared to which it is effectively inefficient) but a GIF replacement (plus it's scriptable and hackable in a number of interesting ways). I wish it were a real, self-contained file format, but APNG completely failed to displace GIF. It's a hack, but it solves a real problem and it opens a venue for something less hackish. Also, it's simple enough any developer can understand the algorithm, there's no patent looming over, no complex codec infrastructure (however layered away), and it's using only HTML/CSS/JS.
mille562 14y ago
Any research into how the download size compares to a similar video asset? Do you have plans for native ios and android views?
- mikewoodworth 14y ago
  In our tests, it depends a lot on the type of content. "line art" compresses much better than video. We left a lot of room in the format to make the encoder side smarter with time which will increase compression performance. The general rule of thumb for file size is h264 is smaller than phosphor is smaller than gif. -mike
RKearney 14y ago
Wasn't this first seen on Apple's website for the iPhone 5 animations? Now this company is selling software to reproduce this effect for $9.99? I haven't checked yet, but I wonder how much of the JavaScript output by this app is identical to what Apple wrote.
- cmcfadden 14y ago
  The blog post acknowledges that the inspiration for the app was the Apple site (and a post on HN). None of the code is shared with their implementation (and all Phosphor's javascript is under MIT license, https://github.com/mikewoodworth/phosphorframework https://github.com/mikewoodworth/phosphorframework), and the Phosphor encoder itself is far more space-efficient than whatever toolset Apple is using internally.
- nthitz 14y ago
  The acknowledge Apple did this first a few times in the post...
  - mxxx 14y ago
    literally on the first line. XD
- tylerhall 14y ago
  $9.99 for an encoder that let's me autoplay animations cross browser and on mobile? Sold!
- dinkumthinkum 14y ago
  I'm not sure what you're trying to say ... Are you upset by the capitalism or what, exactly? Need + ProuctThatSolvesNeed => Profit seems like a good plan to me. If you think it is just plagiarism ... that's a big accusation/assumption.
mxxx 14y ago
Looks fantastic, might try and think of a use for it at work and give it a whirl. I remember being very impressed when reading the 'teardown' articles about how Apple had achieved it, the gap between a GIF and a <video> tag has always had potential, imho...
xanido 14y ago
Jon Skinner implemented a similar technique to create and display screencast animations on the Sublime Text homepage. I was just reading his article[1] last night in which he discussed his technique. It's similar to this implementation, and his source is available on Github[2] (written in Python). [1] http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.html http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.h... [2] http://github.com/sublimehq/anim_encoder http://github.com/sublimehq/anim_encoder
sgdesign 14y ago
Maybe this is a dumb question, but I'm probably not the only one wondering that: how do you capture the video from the iPhone screen in the first place? [Edit: oh, just realized you're probably just using the simulator?] Otherwise, awesome app. I can definitely see myself using this to add short videos to my designs.
- cmcfadden 14y ago
  For that demo, we used the iOS simulator app that's part of Xcode, along with normal screencapture tools (Screenflow in this case). I think that's the way most iOS devs do screencast content, though jailbroken devices can also do native screencapture.
- brk 14y ago
  Check out http://www.airsquirrels.com/ http://www.airsquirrels.com/ they have an app that let's you mirror your iPhone to your desktop. It's very smooth. I use that, and then use a standard screen cap tool to capture the screen on OSX. Result is the ability to do full app demo on your iPhone and have everything mirrored to your screen. Also handy for sharing via a projector... Since it all goes over AirPlay you can demo without needing a cable/dongle off the iPhone.
tambourine_man 14y ago
Does it have an overlaid div fallback option?
- mikewoodworth 14y ago
  Currently no... it's on our list to do, but feel free to fork the player in github if you need it ASAP. -mike
orta 14y ago
Thanks! I've been debating doing something like this on one of my app pages. So I've gone and done it now: http://awesomeputioapp.com http://awesomeputioapp.com Feedback: I didn't like that there isn't a nice way to put all of the Phosphorous code in a subfolder (warning my HTML isn't amazing, I do iOS.) without a find & replace and hunting for the things to change. Overall I'm a happy customer though! Good work guys.
- mikewoodworth 14y ago
  I just took a look at the site, glad it's working for you! As for the moving, perhaps we should emit sample code with a location string you can fill with your path prefix? Sounds good to me. As for your composition, I took a look and the atlas images seem large compared to what we tend to see. Perhaps try turning down the quality slider in the main page - all that affects is the post encoding jpg compression. 60-80% tends to look good.
  - orta 14y ago
    I'll give it a re-run in the morning, sounds like a good idea. As does the path prefix :)
eps 14y ago
On iPad 1 all samples from the Gallery run at, what feels like, 1-2 fps. The screeencast in the blog though is very smooth. Why's the difference?
- martin-adams 14y ago
  Same on the iPhone 4S. I have a feeling it's because they're all running at once.
LAMike 14y ago
So I can animate a movie/short film, take a screencast of it, and use Phosphor to render the movie on the client side? That plus html5 audio could be a new low bandwidth way to stream movies in the future
- mikewoodworth 14y ago
  if you are animating the movie, just export from your app as prores. that's how some of our gallery clips are done (the logo spin for instance in blender 3d model rendered straight to quicktime)
- BitMastro 14y ago
  html5 video and a good codec are a way better use of bandwidth. This technique is good for animations with few moving parts. For example the Alfa animation http://www.divergentmedia.com/phosphor/gallery#alfa http://www.divergentmedia.com/phosphor/gallery#alfa needs to download 14 additional images for a total of 3.5 megabytes for a few seconds' worth of animation.
krajzeg 14y ago
Isn't it interesting how, caused by our inability to directly embed video onto websites, we are basically forced to reinvent video codecs in Javascript? This basically means that on most mobile devices, instead of a hardware-accelerated decompressor, a slower, more CPU-consuming Javascript VM is in charge of video. While technically impressive, I would much prefer the possibility of directly embedding (and controlling) real video.
motdiem 14y ago
This looks great - And fits perfectly into a need I had at the moment for sharing smaller screencasts. I had a few crashes with it this morning on a rMBP, what's the best route for support ? (your forums do not seem updated yet for phosphor)
- mikewoodworth 14y ago
  You can email us at support@divergentmedia.com. We've found one crash and are prepping a fix to submit to the MAS, but we can email you a new build if you get in touch.
jstanley 14y ago
The video was so smooth I didn't realise what the example was. I actually watched the example video through several times thinking "what? there's no video on that page!" before realising that the thing I was watching was the video.
kmfrk 14y ago
HTML 5 video: iOS devices won't play video tags in the DOM, they instead open in a standardized player. Apple also stops them from auto-playing on iPhone. This is what makes Vine so useless on iOS outside of the native app. It makes it preferable to use GIF sans audio generally, whenever it's an option. I get where Apple is coming from, but this is definitely sorely needed for some use cases.
- Terretta 14y ago
  It's not "iOS devices". It's the default browser, Safari. If you use, say, iCab, HTML5 video stays embedded in the page -- to a fault. Often you won't be able to full screen the video, you end up having to zoom the page.
  - kmfrk 14y ago
    True. I use Opera on desktop, so I should know to use the distinction. I just hate the browser alternatives on iOS so much I repressed them. :)
deleted 14y ago
[deleted]
dergachev 14y ago
This is really cool! But often you can't upload videos or javascript, but only a GIF, like on a github.com's README file. For that scenario, I recently wrote up a quick tutorial on how to use Quicktime + FFmpeg + gifsice to easily create a short screencast and convert it into a GIF. https://gist.github.com/4627207 https://gist.github.com/4627207

155 points by mikewoodworth 14y ago

So Apple dug a hole by: - not allowing iOS to play videos in-DOM. - deciding not to support WebM, so Firefox users can't see their videos. And now others are following them by helping to dig deeper in a vastly inefficient way of displaying moving images ? What could previously be offloaded to dedicated engines is now going to burn the CPU via JS. Hum, now that's gonna work…

jackalope 14y ago
I viewed three examples simultaneously from the Phosphor gallery at http://www.divergentmedia.com/phosphor/gallery http://www.divergentmedia.com/phosphor/gallery and each one only used about 5% CPU, for 15% total. I closed them and viewed a YouTube HTML5 video (no Flash on this machine) and it consistently used 70% CPU. It seems the Phosphor approach is more lightweight than video and it was entirely smooth (on a 2007 dual core MacBook Pro running a 64-bit Linux). If you don't need audio and want to include a video or presentation in your page that doesn't require a plugin and looks to be supported on a wide range of browsers and platforms, this looks like a compelling option.
- exodust 14y ago
  The image frames in those examples are 250 x 250. There's no sound. It's video deconstructed into frames then those frames animated to re-form a second-rate appearance of the original video. I can't believe it's not butter! Funnily enough it's Flash which is the best performer out of those he lists. Attempting to mask and layer video in HTML5 is a painful scrapheap of half-baked canvas hacking and browser compatibility woes. And then it doesn't work very well anyway even when you finally get the canvas to kick in. Flash eats that kind of thing for breakfast, with easy alpha channels on video layers and so on. I wish Flash would just make a comeback, improve itself as a mobile plugin for browsers, and we can all enjoy rights-restricted video playback in the browser (at least), and clever next gen web games without paying Apple 30%.
lloeki 14y ago
> a vastly inefficient way of displaying moving images ? I don't see this as a MP4/WebM replacement (compared to which it is effectively inefficient) but a GIF replacement (plus it's scriptable and hackable in a number of interesting ways). I wish it were a real, self-contained file format, but APNG completely failed to displace GIF. It's a hack, but it solves a real problem and it opens a venue for something less hackish. Also, it's simple enough any developer can understand the algorithm, there's no patent looming over, no complex codec infrastructure (however layered away), and it's using only HTML/CSS/JS.

mille562 14y ago

Any research into how the download size compares to a similar video asset? Do you have plans for native ios and android views?

mikewoodworth 14y ago
In our tests, it depends a lot on the type of content. "line art" compresses much better than video. We left a lot of room in the format to make the encoder side smarter with time which will increase compression performance. The general rule of thumb for file size is h264 is smaller than phosphor is smaller than gif. -mike

RKearney 14y ago

Wasn't this first seen on Apple's website for the iPhone 5 animations? Now this company is selling software to reproduce this effect for $9.99? I haven't checked yet, but I wonder how much of the JavaScript output by this app is identical to what Apple wrote.

cmcfadden 14y ago
The blog post acknowledges that the inspiration for the app was the Apple site (and a post on HN). None of the code is shared with their implementation (and all Phosphor's javascript is under MIT license, https://github.com/mikewoodworth/phosphorframework https://github.com/mikewoodworth/phosphorframework), and the Phosphor encoder itself is far more space-efficient than whatever toolset Apple is using internally.
nthitz 14y ago
The acknowledge Apple did this first a few times in the post...
- mxxx 14y ago
  literally on the first line. XD
tylerhall 14y ago
$9.99 for an encoder that let's me autoplay animations cross browser and on mobile? Sold!
dinkumthinkum 14y ago
I'm not sure what you're trying to say ... Are you upset by the capitalism or what, exactly? Need + ProuctThatSolvesNeed => Profit seems like a good plan to me. If you think it is just plagiarism ... that's a big accusation/assumption.

mxxx 14y ago

Looks fantastic, might try and think of a use for it at work and give it a whirl. I remember being very impressed when reading the 'teardown' articles about how Apple had achieved it, the gap between a GIF and a <video> tag has always had potential, imho...

xanido 14y ago

Jon Skinner implemented a similar technique to create and display screencast animations on the Sublime Text homepage. I was just reading his article[1] last night in which he discussed his technique. It's similar to this implementation, and his source is available on Github[2] (written in Python). [1] http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.html http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.h... [2] http://github.com/sublimehq/anim_encoder http://github.com/sublimehq/anim_encoder

sgdesign 14y ago

Maybe this is a dumb question, but I'm probably not the only one wondering that: how do you capture the video from the iPhone screen in the first place? [Edit: oh, just realized you're probably just using the simulator?] Otherwise, awesome app. I can definitely see myself using this to add short videos to my designs.

cmcfadden 14y ago
For that demo, we used the iOS simulator app that's part of Xcode, along with normal screencapture tools (Screenflow in this case). I think that's the way most iOS devs do screencast content, though jailbroken devices can also do native screencapture.
brk 14y ago
Check out http://www.airsquirrels.com/ http://www.airsquirrels.com/ they have an app that let's you mirror your iPhone to your desktop. It's very smooth. I use that, and then use a standard screen cap tool to capture the screen on OSX. Result is the ability to do full app demo on your iPhone and have everything mirrored to your screen. Also handy for sharing via a projector... Since it all goes over AirPlay you can demo without needing a cable/dongle off the iPhone.

tambourine_man 14y ago

Does it have an overlaid div fallback option?

mikewoodworth 14y ago
Currently no... it's on our list to do, but feel free to fork the player in github if you need it ASAP. -mike

orta 14y ago

Thanks! I've been debating doing something like this on one of my app pages. So I've gone and done it now: http://awesomeputioapp.com http://awesomeputioapp.com Feedback: I didn't like that there isn't a nice way to put all of the Phosphorous code in a subfolder (warning my HTML isn't amazing, I do iOS.) without a find & replace and hunting for the things to change. Overall I'm a happy customer though! Good work guys.

mikewoodworth 14y ago
I just took a look at the site, glad it's working for you! As for the moving, perhaps we should emit sample code with a location string you can fill with your path prefix? Sounds good to me. As for your composition, I took a look and the atlas images seem large compared to what we tend to see. Perhaps try turning down the quality slider in the main page - all that affects is the post encoding jpg compression. 60-80% tends to look good.
- orta 14y ago
  I'll give it a re-run in the morning, sounds like a good idea. As does the path prefix :)

eps 14y ago

On iPad 1 all samples from the Gallery run at, what feels like, 1-2 fps. The screeencast in the blog though is very smooth. Why's the difference?

martin-adams 14y ago
Same on the iPhone 4S. I have a feeling it's because they're all running at once.

LAMike 14y ago

So I can animate a movie/short film, take a screencast of it, and use Phosphor to render the movie on the client side? That plus html5 audio could be a new low bandwidth way to stream movies in the future

mikewoodworth 14y ago
if you are animating the movie, just export from your app as prores. that's how some of our gallery clips are done (the logo spin for instance in blender 3d model rendered straight to quicktime)
BitMastro 14y ago
html5 video and a good codec are a way better use of bandwidth. This technique is good for animations with few moving parts. For example the Alfa animation http://www.divergentmedia.com/phosphor/gallery#alfa http://www.divergentmedia.com/phosphor/gallery#alfa needs to download 14 additional images for a total of 3.5 megabytes for a few seconds' worth of animation.

krajzeg 14y ago

Isn't it interesting how, caused by our inability to directly embed video onto websites, we are basically forced to reinvent video codecs in Javascript? This basically means that on most mobile devices, instead of a hardware-accelerated decompressor, a slower, more CPU-consuming Javascript VM is in charge of video. While technically impressive, I would much prefer the possibility of directly embedding (and controlling) real video.

motdiem 14y ago

This looks great - And fits perfectly into a need I had at the moment for sharing smaller screencasts. I had a few crashes with it this morning on a rMBP, what's the best route for support ? (your forums do not seem updated yet for phosphor)

mikewoodworth 14y ago
You can email us at support@divergentmedia.com. We've found one crash and are prepping a fix to submit to the MAS, but we can email you a new build if you get in touch.

jstanley 14y ago

The video was so smooth I didn't realise what the example was. I actually watched the example video through several times thinking "what? there's no video on that page!" before realising that the thing I was watching was the video.

kmfrk 14y ago

HTML 5 video: iOS devices won't play video tags in the DOM, they instead open in a standardized player. Apple also stops them from auto-playing on iPhone. This is what makes Vine so useless on iOS outside of the native app. It makes it preferable to use GIF sans audio generally, whenever it's an option. I get where Apple is coming from, but this is definitely sorely needed for some use cases.

Terretta 14y ago
It's not "iOS devices". It's the default browser, Safari. If you use, say, iCab, HTML5 video stays embedded in the page -- to a fault. Often you won't be able to full screen the video, you end up having to zoom the page.
- kmfrk 14y ago
  True. I use Opera on desktop, so I should know to use the distinction. I just hate the browser alternatives on iOS so much I repressed them. :)

deleted 14y ago

[deleted]

dergachev 14y ago

This is really cool! But often you can't upload videos or javascript, but only a GIF, like on a github.com's README file. For that scenario, I recently wrote up a quick tutorial on how to use Quicktime + FFmpeg + gifsice to easily create a short screencast and convert it into a GIF. https://gist.github.com/4627207 https://gist.github.com/4627207