仿腾讯吴亦凡视频播放案例
下载地址：http://download.csdn.net/detail/qq_16494241/9472186
以上是用到的文件，没有上传的资源路径用的是网络上资源，以下是页面代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
<title>仿腾讯吴亦凡视频案例</title>
<style>
@media screen and (min-width:320px) and (max-width:359px){html{font-size:12px;}body{ font-size:1.2rem;}}
@media screen and (min-width:360px) and (max-width:374px){html{font-size:13.5px;}}
@media screen and (min-width:375px) and (max-width:383px){html{font-size:14.07px;}}
@media screen and (min-width:384px) and (max-width:392px){html{font-size:14.38px;}}
@media screen and (min-width:393px) and (max-width:410px){html{font-size:14.75px;}}
@media screen and (min-width:411px) and (max-width:413px){html{font-size:15.41px;}}
@media screen and (min-width:414px) and (max-width:479px){html{font-size:15.52px;}}
@media screen and (min-width:480px) and (max-width:511px){html{font-size:18px;}}
@media screen and (min-width:512px) and (max-width:639px){html{font-size:19.19px;}}
@media screen and (min-width:640px){html{font-size:24px;}}
*{ margin:0px; padding:0px; -webkit-tap-highlight-color:rgba(0,0,0,0);}
html{ min-width:320px; max-width:640px; margin:0 auto;}
body{ font-family:"微软雅黑","Microsoft YaHei"; color:#4d4d4d; font-size:1.4rem; line-height:2.2rem; background:#f4f4f4; position:relative;}
.cle:after{ content:attr(x); display:block; height:0; clear:both;}
/*配置样式*/
.grey{ color:#999;}
.m_top{ margin-top:0.4rem;}
/*标题*/
h1{font-family:"黑体"; font-size:1.75rem; line-height:2.6rem; color:#373737;}
/*时间*/
.time{ font-size:1.1rem;}
/*内容部分*/
.content{ text-align:justify;text-justify:inter-ideograph;}
.content p{ margin-top:0.4rem;}
#show1{ width:90%; margin:0 auto; position:relative;}
.video1_box{ position:relative;}
#video1_img{ width:100%; position:relative; z-index:2;}
#video1{ position:absolute; left:0; top:0; z-index:1;}
#show2 , #show4{ width:100%; max-width:640px; position:fixed; top:0; display:none;}
#video1 , #video2 , #video3{ width:100%; max-width:640px;}
#show3{ width:100%; height:100vh; color:#fff; background:url(http://ossweb-img.qq.com/images/wefire/act/a20150826kris/bg_vcall.jpg) no-repeat center top; background-size:cover; position:absolute; top:0; display:none;}
.talk{ margin:1rem;}
.talk_l{ width:5.5rem; height:5.5rem; background:url(http://ossweb-img.qq.com/images/wefire/act/a20150826kris/sp.png) no-repeat 0 -16.66666666666667rem; background-size:33.33333333333333rem; float:left;}
.talk_r{ margin-left:0.5rem; line-height:2rem; float:left;}
.talk_r p:first-child{ font-size:2rem; margin:0.5rem 0;}
.txw , .xx{ width:5.5rem; text-align:center; position:absolute; bottom:13rem;}
.txw{ left:2.3rem;}
.xx{ right:2.3rem;}
.txw:after{ content:""; display:block; width:1.583333333333333rem; height:1.583333333333333rem; background:url(http://ossweb-img.qq.com/images/wefire/act/a20150826kris/sp.png) no-repeat -8.375rem -16.66666666666667rem; background-size:33.33333333333333rem; position:absolute; left:50%; margin-left:-0.795rem; top:-2rem;}
.xx:after{ content:""; display:block; width:1.708333333333333rem; height:1.708333333333333rem; background:url(http://ossweb-img.qq.com/images/wefire/act/a20150826kris/sp.png) no-repeat -12.5rem -16.54166666666667rem; background-size:33.33333333333333rem; position:absolute; left:50%; margin-left:-0.795rem; top:-2.2rem;}
.jt{ width:6.6rem; text-align:center; position:absolute; left:50%; margin-left:-3.3rem; bottom:3rem;}
.jt:after{ content:""; display:block; width:6rem; height:6rem; background:url(http://ossweb-img.qq.com/images/wefire/act/a20150826kris/sp.png) no-repeat -8.375rem -20.875rem; background-size:33.33333333333333rem; position:absolute; left:50%; margin-left:-3rem; top:-6.2rem;}
#audio{ display:none;}
</style>
<script type="text/javascript" src="jquery2.1.js"></script>
</head>
<body>
<div id="show1">
<div><img style="width:100%;" src="tencent/top.jpg" /></div>
<h1 class="m_top">粉丝哭倒？吴亦凡圆寸疑为入伍做准备</h1>
<div class="time grey m_top">2015-08-28. 腾讯娱乐</div>
<div class="content">
<p> 近日，当红影视歌三栖明星吴亦凡的圆寸终于被媒体捕捉到了。让粉丝惊呼，圆寸果然是检验帅哥的首要标准。不过，更让粉丝惊讶的是圆寸比想象中还要短，这是为新片做造型？还是像传闻爆料一样为当兵做准备？</p>
<div class="video1_box">
<img id="video1_img" src="tencent/page1.jpg" />
<video id="video1" src="http://ossweb-img.qq.com/images/wefire/act/a20150826kris/v1.mp4" preload="auto" x-webkit-airplay="true" webkit-playsinline="true"></video>
</div>
<p id="touchstart_text"> 其实，吴亦凡要入伍传闻并非空穴来风。早前，吴亦凡曾表示过对一身戎装强烈渴望；其本人更认为，男人没当过兵，是一种遗憾。难道男神剃头真准备应招入伍了？一石激起千层浪，一个传闻惹哭一众粉丝……</p>
</div>
</div>
<div id="show2">
<video id="video2" src="http://ossweb-img.qq.com/images/wefire/act/a20150826kris/v2.mp4" preload="auto" x-webkit-airplay="true" webkit-playsinline="true"></video>
</div>
<div id="show3" class="cle">
<div class="talk">
<div class="talk_l"></div>
<div class="talk_r">
<p>吴亦凡</p>
<p>邀请您视频聊天...</p>
</div>
</div>
<div class="txw">提醒我</div>
<div class="xx">信息</div>
<div class="jt">接听</div>
</div>
<audio id="audio" src="" autoplay loop></audio>
<div id="show4" class="cle">
<video id="video3" src="http://ossweb-img.qq.com/images/wefire/act/a20150826kris/v3.mp4" preload="auto" x-webkit-airplay="true" webkit-playsinline="true"></video>
</div>
<script>
var $myVideo1 = $("#video1")[0];
var $myVideo2 = $("#video2")[0];
var $myVideo3 = $("#video3")[0];
var $myAudio = $("#audio")[0];
//PC端页面,点击图片播放视频
!function(){var a=navigator.userAgent;-1==a.indexOf("iPhone")&&-1==a.indexOf("iPad")&&-1==a.indexOf("iPod")&&-1==a.indexOf("Android")&&($("#video1_img").click(function(){if_play();}))}();
//移动端页面，在图片上拖动滚动条 或 在最后一段文字时拖动滚动条，则播放视频
var browser = {
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {
webKit : u.indexOf('AppleWebKit') > -1,
ios : !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
weixin : u.indexOf('MicroMessenger') > -1,
txnews : u.indexOf('qqnews') > -1,
sinawb : u.indexOf('weibo') > -1,
mqq : u.indexOf('QQ') > -1
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
};
if(browser.versions.android||browser.versions.weixin||browser.versions.txnews||browser.versions.mqq||browser.versions.webKit||browser.versions.ios||browser.versions.sinawb){
//控制视频播放
$("#video1_img").one("touchstart",function(){
if_play();
});
}
//播放第一个视频
function if_play(){
if($myVideo1.currentTime <= 0){
//播放没有src路径的手机铃声（事件触发播放，避免需要播放时播放不了）
$myAudio.play();
//微信端同时播放两个视频会有停顿空屏的可能，所以先播放第二个视频,在其timeupdate事件中暂停,暂停后取消监听timeupdate事件
$myVideo2.play();
$myVideo2.addEventListener("timeupdate", myVideo2_timeupdate ,false);
//播放第一个视频
setTimeout(function(){
$myVideo1.play();
$myVideo1.addEventListener("timeupdate", myVideo1_timeupdate ,false);
$myVideo1.addEventListener("ended", myVideo1_end ,false);
},1000);
}
}
function myVideo1_timeupdate(){
if($myVideo1.currentTime > 0){
$("#video1_img").css("z-index",1);
$("#video1").css("z-index",2);
}
}
//第一个视频播放结束后，再次播放暂停的第二个视频
function myVideo1_end(){
$myVideo2.play();
$myVideo2.addEventListener("ended", myVideo2_end ,false);
$("#show1").hide();
$("#show2").show();
}
//与第一个视频同时播放并立即暂停
function myVideo2_timeupdate(){
//微信端视频没有播放时，立即暂停，再次播放会有停顿空屏的可能
if($myVideo2.currentTime > 0){
$myVideo2.pause();
$myVideo2.removeEventListener("timeupdate", myVideo2_timeupdate ,false);
}
}
function myVideo2_end(){
$("#show2").hide();
$("#show3").show();
$myAudio.src = "http://ossweb-img.qq.com/images/wefire/act/a20150826kris/ring.mp3";
}
//接听电话
$(".jt").click(function(){
//播放第三个视频
$myVideo3.play();
//停止铃声
$myAudio.pause();
$myVideo3.addEventListener("timeupdate", myVideo3_timeupdate ,false);
$myVideo3.addEventListener("ended", myVideo3_end ,false);
});
function myVideo3_timeupdate(){
if($myVideo3.currentTime > 0){
$("#show3").hide();
$("#show4").show();
}
};
function myVideo3_end(){
location.reload();
};
</script>
</body>
</html>