Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread Display Modes
Old Aug 13, 2013, 02:16 PM   #1
macrumors 6502
Join Date: Jun 2006
Location: MacVille, USA
Preview videos on iOS 7 webpage: How was were they done?

On Apple's iOS 7 page, what web technology is being used to create these short preview videos? I'm looking at the code, but I can't seem to piece it together.


Think Different.
macaddict23 is offline   0 Reply With Quote
Old Aug 13, 2013, 03:19 PM   #2
macrumors 68000
SrWebDeveloper's Avatar
Join Date: Dec 2007
Location: Alexandria, VA, USA
This code is very telling:

<li class="column first">
					<a class="hardware iphone loading-dark screensequence-video screensequence-enhanced block screensequence-ended" data-screensequence="index_mail#2xvideo,clicktoplay" data-analytics="play,didPlay,stop" data-analytics-name="videos-mail"><div class=" screen screensequence-screen ac-ambient-canplay" style="background-image: url(http://movies.apple.com/media/us/ios/ios7/f34c5445-5a9c-4b3a-9556-8efe89147559/index_mail/index_mail_posterframe_2x.jpg); background-position: 0px 0px; background-repeat: no-repeat no-repeat;"><div id="hires-overview-mail" data-hires="false" class="endstate hires screensequence-endstate screensequence-element" style="transition: opacity 0.4s ease-out; -webkit-transition: opacity 0.4s ease-out; opacity: 1; z-index: 1002; -webkit-transform: none;"></div><img src="http://movies.apple.com/media/us/ios/ios7/f34c5445-5a9c-4b3a-9556-8efe89147559/index_mail/index_mail_posterframe_2x.jpg" data-hires="false" class=" screensequence-posterframe screensequence-element" style="display: none;"><video preload="none" poster="http://movies.apple.com/media/us/ios/ios7/f34c5445-5a9c-4b3a-9556-8efe89147559/index_mail/index_mail_posterframe_2x.jpg" style="width:100%;height:100%;" src="http://movies.apple.com/media/us/ios/ios7/f34c5445-5a9c-4b3a-9556-8efe89147559/index_mail/index_mail_2x.mp4" class=" screensequence-sequence screensequence-element"></video><div class="screensequence-spinner" data-hires="false"></div></div>
						<span class="play screensequence-trigger">Mail <span class="icon show-on-canplay"></span></span>
Boiling it down to the basics, they use HTML5 and create an unordered list and list items as containers for each phone widget. A poster image displays by default which is replaced by another image that displays inline with transition effects such as slide and fade. They also trap click events for the container or the player text/icon below the widget triggers the MP4 playing via the HTML5 video tag, replacing the poster image inline. The use AC Media player (Javascript framework) for the video playback and controls (extending the video tag with unique attributes used by the player) based on their source where I see them linking its minimized Javascript file.

You could this kind of thing using HTML5, a good video player with a decent API like VideoJS, jQuery and a couple of plugins for transition effects. That's the technology, what makes it special is the graphics and presentation, of course.
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
SrWebDeveloper is offline   0 Reply With Quote

MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Safari in iOS 7. Not storing position on webpage? sunking101 iOS 7 1 Nov 4, 2013 07:29 PM
Custom webpage icons for iOS josephbusti Mac Programming 2 Oct 1, 2012 01:43 AM
airplay mirroring of videos on webpage haoqfu OS X 10.8 Mountain Lion 2 Jun 4, 2012 01:27 PM

Forum Jump

All times are GMT -5. The time now is 12:49 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2015, MacRumors.com, LLC