https://www.audiquattro.hk/

這是一個在維港海上的車展
展示最新的 S3 Sportback, RS6 Avant 和讓用戶可以分享他們最喜愛的駕駛路線

在桌面和手持裝置上，有活力的頁面設計和動畫過場都能將品牌的形象展現
在互動性的地圖上帶出享受的體驗，不論在船上或網站上

基本架構: PHP codeigniter, jQuery mobile,

Mobile site

We build mobile site (https://www.audiquattro.hk/?device=mobile to view mobile site on desktop)
and do redirections by detecting device type
We use a PHP library Mobile detect to identify if it is a mobile device
and browser redirect to proper URL if needed

Google map customization

We use customized style on google map
Google map provides powerful styling ability for maps (https://developers.google.com/maps/documentation/javascript/styling?csw=1)
Changing road color, sea color, parks color, labels color etc
which is very powerful and can match with the site's color tone and

Google map route tracing

In this site, there is a way for users to design a route that they think are interesting challenging.
We utilized markers and Google directions API (https://developers.google.com/maps/documentation/directions/)
to let user drop two pins, and design a route:

And this works on mobile as well.
We use browser's geolocation API to pin the points while user is driving across the city
and draw the route by Google directions API

This part is a totally new challenge as we are new to this complete customization on google maps and their supplements API
But the final outcome is very satisfactory, Google map API is very powerful
We can build smooth animation transitions, pins, markers, overlays etc, just like a standalone custom map

Video playing

There are 4 separate videos for each celebrity, placed as a Gallery
We use html5 video plugin to play video from same server: http://www.videojs.com/
But as we had 12 videos on one page,
Sometime we will reach the html5 video buffering on browser, and the video cannot play,
video onload events do not trigger (we only show the play button after all 4 video are buffered)
That will only happens if we put more than 10 videos in one page.
but there is not much browser's internal video buffering documents online,
So in the end, we need to insert/remove video tags on gallery events to overcome this problem.