Using Phosphor is simple and fun. This manual will walk you through the basics, and will explore the situations in which Phosphor is most appropriate.
Upon launch, Phosphor displays a grid of previously accessed media, as well as an assortment of sample source material. If you’re still in the process of getting familiar with Phosphor, the sample media gives you the opportunity to begin experimenting immediately. You can use the “open” button (or select open from the file menu) to open any other modern QuickTime movie on your computer.
Phosphor can open most modern QuickTime files, including H.264 and ProRes. In addition, Phosphor can open image sequences in any standard format (PNG, JPG, etc).
See chapter three for tips on how to prepare media for Phosphor.
Once you’ve loaded your movie into Phosphor, you can adjust a variety of settings, including format, quality, and background color.
PNG files are a good choice for movies which include an alpha layer. The transparency will be preserved, allowing you to integrate your Phosphor composition with an existing background design on your website.
JPEG files are the best choice for most types of content, as the files are highly compressed and easily worked with. When working with JPEG files, the quality slider adjusts how heavily compressed the resulting files will be.
TIFF files are uncompressed, and are not suitable for use directly within a webpage. Use this option if you’ll be compressing your files separately, using an external tool.
Interactive Mode will allow users to scrub back and forth through your composition using their mouse or a touch interface. This is ideal for product demonstrations and 3d visualizations. The compositions generated in interactive mode will be larger than non-interactive mode.
The loop setting will cause your composition to loop when played in a webbrowser. You can adjust this after exporting by editing the HTML generated by Phosphor.
If you’re working with content captured by a traditional video camera, it’s very large. You can resize your video right within Phosphor, using either the “zoom” adjustment, or by entering height and width values. The lock icon will allow you to adjust the aspect ratio of your image.
The rate control allows you to adjust how fast your Phosphor compositon plays in the browser. The default is 100%, meaning the composition will play at the same rate as the source file.
If your source media is in the ProRes 4444 format, and contains alpha (transparency) information, you can use the adjust the background color using the “Set Background Color” menu option (under the “encode” menu). This color will be composited into your image when exporting in the JPEG format, which does not support transparency. If your target format supports transparency (PNG or TIFF), the transparency in your source video will be preserved.
Once you’ve made your selections, press the export process to generate your Phosphor output. Phosphor will analyze your content and figure out the most efficient way to prepare it for delivery. With a longer movie, this can be time consuming.
You can work with additional movies within Phosphor during an export - simply select “open” from the “file” menu to begin working on another composition.
Phosphor works best with short movies which do not contain a lot of visual noise. Visual noise includes things like static on a television screen, a snow storm, or ripping water.
Sources can be either QuickTime files (H.264, ProRes) or image sequences. Image sequences should be in their own folder, and the files should be numbered sequentially. By default, image sequences play at a rate of 20 frames per second, but this can be altered using the “rate” control.
Video typically runs at 30 frames per second. In many cases, you can achieve fluid motion with a lower framerate, and thus benefit from greater efficiency. Using your video editing software to convert your media to 15 frames per second will substantially reduce the size of your composition.
The “Rate” control in Phosphor allows you to control the rate at which the final composition plays, but will not alter the overall filesize.
Videos longer than approximately 30 seconds will generally result in large compositions, which may not work well on mobile devices or devices with limited memory. For these types of content, a more traditional video embed is more appropriate.
Phosphor outputs standard image files, in either JPG, PNG or TIFF format. These files can be modified with traditional image manipulation tools. For example, the free ImageOptim application can often substantially reduce the size of PNG and JPG files, without an additional reduction in quality.
When editing Phosphor images, it’s important that you don’t resize the images. If the overall resolution of the file changes, the Phosphor library will no longer be able to display the composition.
The other code within the script block enables playback controls and interactivity - you may choose to leave those out, depending on your particular needs.
The Phosphor Framework has three callbacks which may be specified as parameters on the load_animation function. These allow you to trigger custom actions based on events which occur within the Phosphor framework.
This callback will be triggered each time a new frame is drawn. Your function declaration should include two parameters, which will be passed the current framecount as well as any metadata associated with that frame. This count will reset to zero each time the composition repeats. You may manually add metadata to a frame by adding an “m” key to the json object for each frame containing arbitrary metadata.
This function will be triggered after all of the images for your composition have successfully been loaded from the server. Generally, this is used to trigger the play() function.
This callback will be triggered each time the last frame in your composition is displayed. If your composition is set to loop, this will be triggered multiple times.
Phosphor exposes a variety of functions for playback control, which you may choose to trigger from your own code.
Begins playback of your composition.
Stops playback of your composition.
Enables or disable debug overlay.
Enables or disables looped playback of the composition.
Get the current frame number.
Jump to a particular frame within the composition.
The Phosphor Framework is relatively straightforward, and should be easy to customize by developers looking for functionality not available out of the box. We’d love to see what you build - send us your results at or fork the framework on GitHub.
Phosphor supports QuickTime videos which are encoded using H.264 and Apple ProRes. Future versions of Phosphor will support loading image sequences.
Running multiple Phosphor compositions on one page may lead to performance problems on older mobile devices (smartphones) and should be avoided for sites which are likely to be heavily trafficked by mobile browsers.
Phosphor makes use of the libjpeg library from the Independent JPEG Group.