# 简单几步完美模拟出苹果官网高端大气上档次的产品视频演示效果

场景

最近苹果发布了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

```html
<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，

```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

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

这就完成了，点击链接或图片的时候调用showvideo就可以在网页中间秀一个大视频，点击空白位置就可以隐藏掉视频。
