当前位置:编程学习 > 网站相关 >>

如何模拟苹果官网高端大气上档次的产品视频演示

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

最终演示

http://www.polyv.net/help/v-manual/2013/0911/129.html
云视频 视频托管 无广告视频 --------------------编程问答-------------------- ( ・ิω・ิ) good job!
补充:云计算 ,  云存储
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,