簡單幾步完美模擬出蘋果官網高階大氣上檔次的產品影片展示效果

場景

最近蘋果發表了 iPhone 5C 和 iPhone 5S，哥在官網觀看了高階大氣上檔次的影片產品展示，雖然沒馬上決定賣腎入手，不過還是對這種產品展示的方式產生興趣，決定動手模擬一個。

原理

利用保利威視影片播放器的 video_bg_color 參數，讓播放器的底色設為白色，不會再有黑邊框了，例如 video_bg_color=ffffff。 保利威視播放器還有一個參數為 ban_bar_keep_play_btn，隱藏進度條，只留一個中間的播放按鈕。

實現

先到保利威視後台，播放器設定裡面挑選一個上檔次的影片播放器，我挑了最後一個「現代」風格的。
然後再把右側選單欄的幾項打勾的都去掉，片尾設定裡面，把「返回片頭」勾上。
現在準備將影片程式碼複製貼上到網站了，在程式碼的 flashvar 的 value 裡面，額外加入兩個參數 video_bg_color=ffffff&ban_ata_bar_keep_play_btn=on

<div class="overlay" id="video" onclick="hideme()">
    <div style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; width: 100%; height: 100%; visibility: visible; padding-top: 77px;TEXT-ALIGN: center;">
        播放器代码放这里
    </div>
</div>

還需要在頁面加入一段 CSS，

<style type="text/css">
    .overlay{
        background-color:#fff;
        position:fixed;
        width:100%;
        height:100%;
        top:0px;
        left:0px;
        z-index:1000;
        display:none;
    }
</style>

最後加一段 JavaScript

<script>
function showvideo(){
   document.getElementById("video").style.display="block";
}
function hideme(){
   document.getElementById("video").style.display="none";
}
</script>

這就完成了，點擊連結或圖片的時候呼叫 showvideo 就可以在網頁中間秀一個大影片，點擊空白位置就可以隱藏掉影片。