国产三级一区二区_欧美精品二区三区四区免费看视频_欧美日韩日本视频_久久久9色精品国产一区二区三区

進入新版

聯系電話: 400-638-8883

產品咨詢:

電話咨詢

400-638-8883

簡單幾步完美模擬出蘋果官網高端大氣上檔次的產品視頻演示效果

發布于:2013-11-26 09:34來源:未知 作者:保利威 點擊:
場景

最近蘋果發布了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就可以在網頁中間秀一個大視頻,點擊空白位置就可以隱藏掉視頻。

最終演示
 
點擊這里
tag標簽:
------分隔線----------------------------
------分隔線----------------------------