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

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

  1. macaddict23 macrumors 6502


    Jun 20, 2006
    MacVille, USA
    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.

  2. SrWebDeveloper macrumors 68000


    Dec 7, 2007
    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(; 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="" data-hires="false" class=" screensequence-posterframe screensequence-element" style="display: none;"><video preload="none" poster="" style="width:100%;height:100%;" src="" 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.

Share This Page