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

场景

最近苹果发布了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就可以在网页中间秀一个大视频，点击空白位置就可以隐藏掉视频。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://polyv.gitbook.io/document/docs/unclassified/2013/c1fc777bca19ea57ac8207b428eeea0fhtml.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
