Simulator Recorder movies, when embedded in web pages, can make for a striking and effective promotional and instructional tool.
You can use the HTML below to embed the movies. Background images are available for iPhone 4 (landscape and portrait) and iPad (landscape and portrait). These are derived from those included in Apple's standard marketing artwork packs, and as such the same terms and conditions governing their use applies. Note that the iPad images are sized to take half-size (512x384 or 384x512) movies.
For iPhone landscape orientation:
<DIV style="background-image: url(/path/to/image/iphone_landscape.png); background-repeat: no-repeat;
width: 760; height: 470; padding-left: 137px; padding-top: 32px; padding-bottom: 118px;">
<VIDEO width="480" height="320" controls="controls">
<SOURCE src="/path/to/your/movie" />
</VIDEO>
</DIV>
For iPhone in portrait orientation:
<DIV style="background-image: url(/path/to/image/iphone_portrait.png); background-repeat: no-repeat;
width: 388; height: 840; padding-top: 136px; padding-left: 36px; padding-bottom: 224px;">
<VIDEO width="320" height="480" controls="controls">
<SOURCE src="/path/to/your/movie" />
</VIDEO>
</DIV>
For iPad in landscape orientation:
<DIV style="background-image: url(/path/to/image/ipad_landscape.png); background-repeat: no-repeat;
width: 638; height: 536; padding-left: 63px; padding-top: 54px; padding-bottom: 89px;">
<VIDEO width="512" height="384" controls="controls">
<SOURCE src="/path/to/your/movie" />
</VIDEO>
</DIV>
For iPad in portrait orientation:
<DIV style="background-image: url(/path/to/image/ipad_portrait.png); background-repeat: no-repeat;
width: 494; height: 684; padding-top: 63px; padding-left: 55px; padding-bottom: 109px;">
<VIDEO width="384" height="512" controls="controls">
<SOURCE src="/path/to/your/movie" />
</VIDEO>
</DIV>
In all cases, you'll want to make the following substitutions into the code:
url() parameter in the DIV tag to point to the location of the background image.src parameter of the SOURCE tag to point to the location of your movie.The code below embeds movies so that they play using the browser's QuickTime plug-in. Background images are available for iPhone 4 (landscape and portrait) and iPad (landscape and portrait). Note that these images have been altered to make the screen area slightly larger to accomodate the controls which QuickTime displays beneath the movie, and that the iPad images are sized for half-size movies.
For iPhone in landscape orientation:
<DIV style="background-image: url(/path/to/image/iphone_landscape_qt.png); background-repeat: no-repeat;
width: 760; height: 470; padding-left: 142px; padding-top: 31px; padding-bottom: 103px;">
<OBJECT classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" id="movie1" width="480" height="336"
codebase="http://www.apple.com/qtactivex/qtplugin.cab" >
<PARAM name="src" value="/path/to/your/movie">
<EMBED src="/path/to/your/movie" name="movie1" width="480" height="336" autoplay="false"
controller="true" pluginspage="www.apple.com/quicktime/download" enablejavascript="false"
type="video/quicktime" />
</OBJECT>
</DIV>
For iPhone in portrait orientation:
<DIV style="background-image: url(/path/to/image/iphone_portrait_qt.png); background-repeat: no-repeat;
width: 388; height: 840; padding-top: 136px; padding-left: 36px; padding-bottom: 224px;">
<OBJECT classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" id="movie1" width="320" height="496"
codebase="http://www.apple.com/qtactivex/qtplugin.cab" >
<PARAM name="src" value="/path/to/your/movie">
<EMBED src="/path/to/your/movie" name="movie1" width="320" height="496" autoplay="false"
controller="true" pluginspage="www.apple.com/quicktime/download" enablejavascript="false"
type="video/quicktime" />
</OBJECT>
</DIV>
For iPad in landscape orientation:
<DIV style="background-image: url(/path/to/image/ipad_landscape_qt.png); background-repeat: no-repeat;
width: 638; height: 550; padding-left: 63px; padding-top: 54px; padding-bottom: 96px;">
<OBJECT classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" id="movie1" width="512" height="400"
codebase="http://www.apple.com/qtactivex/qtplugin.cab" >
<PARAM name="src" value="/path/to/your/movie">
<EMBED src="/path/to/your/movie" name="movie1" width="512" height="400" autoplay="false"
controller="true" pluginspage="www.apple.com/quicktime/download" enablejavascript="false"
type="video/quicktime" />
</OBJECT>
</DIV>
For iPad in portrait orientation:
<DIV style="background-image: url(/path/to/image/ipad_portrait_qt.png); background-repeat: no-repeat;
width: 494; height: 700; padding-top: 63px; padding-left: 55px; padding-bottom: 109px;">
<OBJECT classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" id="movie1" width="384" height="528"
codebase="http://www.apple.com/qtactivex/qtplugin.cab" >
<PARAM name="src" value="/path/to/your/movie">
<EMBED src="/path/to/your/movie" name="movie1" width="384" height="528" autoplay="false"
controller="true" pluginspage="www.apple.com/quicktime/download" enablejavascript="false"
type="video/quicktime" />
</OBJECT>
</DIV>
In all cases, you'll want to make the following substitutions into the code:
url() parameter in the DIV tag to point to the location of the background image.value parameter of the PARAM tag and the src parameter of the EMBED tag to point to the location of your movie.id parameter of the OBJECT tag and the name parameter of the EMBED tag so they are unique for each movie.You can learn more about embedding QuickTime movies here, and about the parameters to the <EMBED> tag understood by the QuickTime plug-in here.