It is pretty easy to embed an iPhone-optimized video in any website you are designing. Which can be a nice flourish to welcome the growing hordes of iPhone users who might be visiting your site soon.
Sound hard? It’s not. Apple has added a special Export to Web option to QuickTime Pro ($30) that makes the process nearly automatic.
What iPhone users see.
When a movie has been optimized for web-delivery, iPhone users in your audience will see a small blue play button in the lower right of the video thumbnail. Tapping that blue icon activates the iPhone’s built-in QuickTime player and plays a special optimized version of the movie.
QuickTime Pro Tutorial: Export for Video
Note: Apple has automated much of the hard work, however this technique does require a medium-level knowledge of HTML and web publishing to accomplish. You’ll need to be comfortable uploading and finding files on your website, as well as making minor changes to HTML code.
Step 1: Open your Movie and choose File > Export for Web…
Step 2: Name your Exported Files and Select Web Versions.
In the dialog that appears, specify a filename and select a location for the exported movies and HTML ReadMe file. Then select the web versions you want to create of your movie.
- iPhone: Creates a movie that is optimized for delivery to iPhone over a Wi-Fi connection.
- iPhone (cellular): Creates a highly compressed movie that is optimized for delivery to iPhone over a slower cellular connection.
- Desktop: Creates a movie optimized for delivery to computers over broadband connections.
Click Export to generate the needed files.
Step 3: QuickTime Pro will generate the needed files.
Which results in a folder on your hard drive containing a number of movies and an HTML ReadMe file:
Step 4: Upload the Resulting Folder of Files to your Website.
The cool part of this Export to Web process is the resulting ReadMe.html file that gets created. This is a slick custom webpage that contains easy copy-and-paste HTML you can use to embed your movie into a webpage.
You can view the resulting ReadMe.html from our example here:
Link: Example Export – Ninjas ReadMe.html
The ReadMe.html file also provides a preview of what your embedded movie looks like.
Step 5: Follow the instructions to copy HTML to your website.
As a final step, follow the instructions in the ReadMe.html file to copy and paste your embedded movie into your website. Apple provides script links you need to paste in the <head> of your web pages, and separate code for the <body> of your web page where you want the video to be displayed.
If your web page file will be located in a different directory from the movie files, you’ll need to change all the links for the movie URL to include the full path. For example, in our case we needed to replace links to our movie Ninjas.mov with the full URL where that movie is located on our web site: https://creativetechs.com/tips/tip_resources/ChaseJarvis-Ninjas/Ninjas.mov.
Take this feature of QuicKTime Pro for a spin, and see what you can come up with.
Required: QuickTime Pro. If your Export options are grayed out, you probably need to purchase a $30 upgrade to QuickTime Pro from Apple. This gives you access to the full set of QuickTime features this tip requires:
Link: Apple’s QuickTime Pro.
Source: Our example movie features Chase Jarvis RAW: Ninjas, a behind-the-scenes video detailing a fun Chase Jarvis photo shoot from last year. Thanks for letting us use this Chase! We started thinking about this iPhone video tip two months ago while writing about how to Create a QuickTime Video Landing Page for Seattle design Darlin Gray.
