Preview videos on iOS 7 webpage: How was were they done?

Discussion in 'Web Design and Development' started by macaddict23, Aug 13, 2013.

  1. macrumors 6502

    macaddict23

    Joined:
    Jun 20, 2006
    Location:
    MacVille, USA
    #1
    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.

    http://www.apple.com/ios/ios7/

    Thanks!
     
  2. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    This code is very telling:

    Code:
    <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>
    					</a>
    				</li>
    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.
     

Share This Page