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!
http://www.apple.com/ios/ios7/
Thanks!
Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
Preview videos on iOS 7 webpage: How was were they done?
- Thread starter macaddict23
- Start date
- Sort by reaction score
This code is very telling:
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.
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.