最近蘋果發佈了iPhone 5C和iPhone 5S,哥在官網觀看了高端大氣上檔次的視頻產品演示,雖然沒立刻決定賣腎入手,不過仍是對這種產品演示的方式產生興趣,決定動手模擬一個。
原理
利用保利威視視頻播放器的video_bg_color參數,讓播放器的底色置爲白色,不會再有黑邊框了,例如video_bg_color=ffffff。
保利威視播放器還有一個參數爲ban_bar_keep_play_btn,隱藏進度條,只留一箇中間的播放按鈕。 javascript
實現
先到保利威視後臺,播放器設置裏面挑選一個上檔次的視頻播放器,我挑了最後一個「現代」風格的。
而後再把右側菜單欄的幾項打鉤的都去掉,片尾設置裏面,把「返回片頭」勾上。
如今準備將視頻代碼拷貝黏貼到網站了,在代碼的flashvar的value裏面,額外加入兩個參數video_bg_color=ffffff&ban_ata_bar_keep_play_btn=on css
<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, html
<style type="text/css"> .overlay{ background-color:#fff; position:fixed; width:100%; height:100%; top:0px; left:0px; z-index:1000; display:none; }</style>
<script> function showvideo(){ document.getElementById("video").style.display="block"; } function hideme(){ document.getElementById("video").style.display="none"; } </script>