H5仿吴亦凡参军H5
2016-04-16 10:05
429 查看
</pre>这是一个视频兼容问题的H5,为兼容各平台所采用的对策！只在部分机型测试！如有问题欢迎指出！或者有什么好的建议可以一起分享学习！</p><p><pre name="code" class="html"><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <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"> <link rel="stylesheet" href="css/global.css"> <script src="js/jquery-2.1.0.js"></script> <script src="js/global.js"></script> <title></title> </head> <body> <div class="videopageBox1"> <div> <header class="videopageBox1Bg sp"></header> <div class="videopageBox1Content"> <h3>粉丝哭倒？某某要入伍做准备</h3> <h5>2015-1-2<span>疼熏鱼乐</span></h5> <p> 1990年11月06日出生于广东省广州市，演员、歌手。 2007年吴亦凡通过S.M. GlobalAudition Canada加入了韩国SM娱乐公司。 </p> </div> </div> <!--pagevideo--> <div class="videobox"> <div class="bg-video"></div> <div class="video"><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> </div> <!----> <div class="videopageBox1Content1"> <p> 吴亦凡（Kris），1990年11月06日出生于广东省广州市，演员、歌手。 2007年吴亦凡通过S.M. GlobalAudition Canada加入了韩国SM娱乐公司，参加练习生培训。 2012年作为EXO组合成员正式出道，并任EXO/EXO-M队长、主Rapper、门面担当。 2014年5月15日吴亦凡正式向首尔中央地方法院请求判决与SM娱乐公司“专属合同”无效。 之后，吴亦凡回归中国国内发展，出演个人首部电影，担任徐静蕾执导的电影《有一个地方只有我们知道》男主角，凭此获 </p> </div> </div> <!--page2--> <div class="videobox2"> <video id="video2"> <source src="http://ossweb-img.qq.com/images/wefire/act/a20150826kris/v2.mp4" type="video/mp4"> </video> </div> <!--page3--> <div class="videopageBox3 page"> <div class="videopageBox3Title"> <div class="icon-header"><span class="icon sp"></span></div> <div> <h4>吴亦凡</h4> <h5>邀请你视频聊天 <span class="load_one"></span> <span class="load_two"></span> <span class="load_three"></span> </h5> </div> </div> <div class="videopageBox3Icon"> <ul> <li> <div class="icon-watch"><span class="icon sp"></span></div> <h5>提醒我</h5> </li> <li> <div class="icon-im"><span class="icon sp"></span></div> <h5>信息</h5> </li> </ul> </div> <div class="videopageBox3Go"> <div class="icon-go"><span class="icon sp"></span></div> <h5>接听</h5> </div> </div> <!--page3 phone music--> <audio src="images/iphone.mp3" class="phoneMusic" loop="loop"></audio> <!--page4--> <div class="videobox4"> <video id="video4"> <source src="http://ossweb-img.qq.com/images/wefire/act/a20150826kris/v3.mp4" type="video/mp4"> </video> </div> <!--page5--> <div class="videobox5 page"> </div> </body> </html>
global.js
//video
/**遇到的兼容问题
* 一.(Ios ,Android)
* 视频无法自动播放解决方案
* 1：当用户触碰屏幕的时候播放视频，为解决在不同怪异手机视频初始化显示问题，
* 可在视频上添加视频第一帧图片进行遮挡！
* 2：
*
*
* 二.(Ios ,Android)
* 如果当前页面的后面有全屏的视频，即使不显示，位置也不在视窗内。
* 点击页面时会出现“点透”的BUG，页面上的任何触屏事件都捕获不到，
* 就是触屏事件全被看不到的video抢去，解决方法就在video隐藏的时候设置 width:1px; height:1px;
* 等到播放的时候再设置成全屏的宽高。
* 三.
*
*
*
*
*
* **/
//video
window.onload = function(){
//videoFn();//这个是第一版的视频播放存在兼容问题
videoNew()//跟第一版 差不多,都存在兼容问题 ,但是完整 。ps：酷派手机 ，手机中的逗逼手机
//videoAll()//全部是视频可解决可知的兼容问题,这是转载别人的地址 http://www.shanfuapp.com/kehu/wuyifan/ }
//console.log(v1.currentTime);
/***********videonew************/
function videoNew(){
//var
var v1 = $("#video1")[0];
var v2 = $("#video2")[0];
var v4 = $("#video4")[0];
var bgv1 = $(".bg-video");
var bgv2 = $('.videobox2');
var videoBox1 = $(".videopageBox1");
var videoBox3 = $(".videopageBox3");
var musicPhone = $(".phoneMusic");
var videoBox4 = $(".videobox4");
var videoBox5 = $(".videobox5")
//移动端页面，在图片上拖动滚动条 或 在最后一段文字时拖动滚动条，则播放视频
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){
//console.log(browser)
//控制视频播放
$("html").one("touchstart",function(){
if_play();
});
}
function if_play(){
if(v1.currentTime <= 0){
//微信端同时播放两个视频会有停顿空屏的可能，所以先播放第二个视频,在其timeupdate事件中暂停,暂停后取消监听timeupdate事件
v2.play();
v2.addEventListener('timeupdate',v2_timeupdate,false);
//播放第一个视频
setTimeout(function(){
v1.play();
v1.addEventListener("timeupdate",v1_timeupdate,false);
v1.addEventListener("ended",v1_end,false);
},1000);
}
}
//监听播放位置发生改变
function v1_timeupdate(){
if(v1.currentTime > 0){
v1.style.width = "100%";
v1.style.height = "100%";
bgv1.hide();
}
}
//第一页视频播放完毕后，播放第二页被暂停的视频
function v1_end(){
v2.style.width = '100%';
v2.style.height = '100%';
v2.play();
v2.addEventListener("ended",v2_end ,false);
videoBox1.hide();
bgv2.show();
}
//与第一个视频同时播放并立即暂停
function v2_timeupdate(){
//微信端视频没有播放时，立即暂停，再次播放会有停顿空屏的可能
if(v2.currentTime > 0){
v2.pause();
v2.removeEventListener("timeupdate",v2_timeupdate,false);
}
}
function v2_end(){
musicPhone[0].play();
bgv2.addClass("hideout").hide();
videoBox3.show().addClass("showin");
}
//接电话
$(".videopageBox3Go").on("click",function(){
musicPhone[0].pause();
videoBox4.show()
videoBox3.hide();
v4.style.width = "100%";
v4.style.height = "100%";
v4.play();
//v4.addEventListener("timeupdate",v4_timeupdate,false);
v4.ad
bfb6
dEventListener("ended",v4_end,false);
});
function v4_end(){
videoBox4.hide();
videoBox5.show()
};
}
/***************第一版*******************/
function videoFn(){
//var
var v1 = $("#video1")[0];
var v2 = $("#video2")[0];
var v4 = $("#video4")[0];
var bgv1 = $(".bg-video");
var bgv2 = $('.videobox2');
var videoBox1 = $(".videopageBox1");
var videoBox3 = $(".videopageBox3");
var musicPhone = $(".phoneMusic");
var videoBox4 = $(".videobox4");
//第一次触屏播放初始化视频2
$(document).one("touchstart",function(){
v2.play();
});
//视频1播放完回调函数2
v1.addEventListener("ended",function(evt){
v2.currentTime = 0;
videoBox1.hide();
bgv2.show();
v2.style.width = "100%";
v2.style.height = "100%";
v2.play();
});
//视频2添加事件 监听如果已经播放,就暂停
function initVideo(){
if(v2.currentTime){
v2.pause();
v2.removeEventListener("timeupdate",initVideo,false);
console.log("over")
}
}
v2.addEventListener("timeupdate",initVideo,false);
//滚动页面到一定高度播放视频1
var isPlay;
$(document).on("touchmove",function(){
var d = v1.getBoundingClientRect().bottom;//元素下边距离页面上边的距离
if (isPlay) return;
console.log(d);
if (d < 400){
v1.style.width = '100%';
v1.style.height = '100%';
bgv1.hide();
v1.play();
isPlay = true;
}
});
//视频二播放完
v2.addEventListener("ended",function(evt){
musicPhone[0].play();
videoBox3.fadeIn();
bgv2.hide();
});
//第四页视频
$(".videopageBox3Go").on("click",function(){
musicPhone[0].pause();
videoBox4.show();
v4.style.width = "100%";
v4.style.height = "100%";
v4.play();
videoBox3.hide();
});
}css
/**global**/
html,body{
height:100%;
margin: 0;
padding: 0;
}
ul,li{list-style: none;margin: 0;padding: 0;}
body{
font-family:"microsoft yahei";
}
video{width: 1px;height: 1px;}
.page{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
h3,h4,h5{margin: 0;padding: 0;}
/**Flish**/
/**show**/
.showin{
-webkit-animation-name: showin;
animation-name: showin;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes showin {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}
@keyframes showin {
0% {
-webkit-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
-ms-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
100% {
-webkit-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}
/**hide**/
.hideout{
-webkit-animation-name: hideout;
animation-name: hideout;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes hideout {
0% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
100% {
opacity: 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes hideout {
0% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
-ms-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
100% {
opacity: 0;
-webkit-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}
/**page1**/
.videobox{
position: relative;
width: 100%;
height: 60vw;
}
.videopageBox1{
display: block;
padding: 10px;
}
.videopageBox1Bg{
display: block;
width: 138px;
height: 20px;
background-position: 0px 0px;
margin: 10px 0;
}
.videopageBox1Content{
border-top: 1px solid #ccc;
padding: 10px 0;
}
.videopageBox1Content h3{
font-size: 24px;
line-height: 40px;
font-weight: 600;
color: #152028;
letter-spacing: 1px;
}
.videopageBox1Content h5{
line-height: 30px;
font-size: 16px;
font-weight: 400;
color: #666;
}
.videopageBox1Content h5 span{
margin-left: 10px;
}
.videopageBox1Content p{
text-align: justify;
text-indent: 20px;
font-size: 20px;
color: #666;
margin: 10px 0;
}
.videopageBox1Content1{
padding: 10px 0;
}
.videopageBox1Content1 p{
font-size: 16px;
text-align: justify;
text-indent: 32px;
line-height: 24px;
}
.page1{
z-index: 9;
}
.page1bg{
width: 100%;
height: 100%;
background-color: #fff;
position: absolute;
top: 0;
left: 0;
background: url(../images/p1_wb_bg.jpg) no-repeat 50% 50%;
background-size: cover;
}
/**page2**/
.videobox2{
position: relative;
width: 100%;
display: none;
}
.video{
width: 100%;
height: 100%;
}
/**因为padding取值百分比时候，是相对于包含块的宽度而定的。视频1比例是580X386,所以padding-top的值为386/580=66.55%。**/
.bg-video{
width: 100%;
padding-top: 66.55%;
position: absolute;
top: 0;
left: 0;
background:url(../images/img1.png) no-repeat 0 0;
background-size: cover;
z-index: 99;
}
/**icon**/
.sp{
background-image: url(../images/sp.png);
background-size: 400px 400px;
}
.icon-header{
width: 66px;
height: 66px;
float: left;
}
.icon-header .icon{
display: block;
width: 100%;
height: 100%;
background-position: 0px -200px;
}
.icon-watch{
width: 90px;
margin: 0px auto;
}
.icon-watch .icon{
display: block;
width: 21px;
height: 21px;
margin: 0px auto;
padding-bottom: 8px;
background-position: -100px -200px;
}
.icon-im{
width: 90px;
margin: 0px auto;
}
.icon-im .icon{
display: block;
width: 21px;
height: 21px;
margin: 0px auto;
padding-bottom: 8px;
background-position: -150px -200px;
}
.icon-go{
width: 72px;
margin: 0px auto;
}
.icon-go .icon{
background-position: -100px -250px;
display: block;
width: 75px;
height: 75px;
}
.videopageBox3Go h5{
text-align: center;
line-height: 30px;
color: #fff;
font-size: 18px;
font-weight: 500;
}
/**page3**/
.videopageBox3{
position: relative;
background: url(../images/bg_vcall.jpg) no-repeat 0 0;
background-size: cover;
display: none;
}
.videopageBox3Title{
overflow: hidden;
padding: 15px;
padding-top: 20%;
}
.videopageBox3Title div:last-child{
float: left;
margin-left: 15px;
}
.videopageBox3Title div:last-child h4{
font-size: 24px;
font-weight: 500;
color: #fff;
letter-spacing: 2px;
line-height: 40px;
}
.videopageBox3Title div:last-child h5{
line-height: 26px;
color: #fff;
letter-spacing: 1px;
}
.videopageBox3Icon{
margin-top: 30%;
}
.videopageBox3Icon ul{
overflow: hidden;
}
.videopageBox3Icon ul li h5{
text-align: center;
color: #fff;
}
.videopageBox3Icon ul li:first-child{
width: 45%;
float: left;
}
.videopageBox3Icon ul li:last-child{
width: 45%;
float: right;
}
.videopageBox3Go{
margin-top: 20%;
}
.videopageBox3Title div:last-child span{
display: inline-block;
width: 2px;
height: 2px;
border-radius: 100%;
background-color: #fff;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
margin:0 3px;
}
.videopageBox3Title div:last-child .load_one {
-webkit-animation-delay: -0.32s;
}
.videopageBox3Title div:last-child .load_two {
-webkit-animation-delay: -0.16s;
}
.videopageBox3Title div:last-child .load_three {
-webkit-animation-delay: 0s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(1.0); opacity:0 }
40% { -webkit-transform: scale(1.0); opacity:1 }
}
/**videobox4**/
.videobox4{
display: none;
}
/**videobox5**/
.videobox5{
position: relative;
background: url(../images/phone.png) no-repeat 0 0;
background-size: cover;
display: none;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5 localStorage图书阅读器实例
- 【HTML5 】<script>元素async,defer异步加载
- CDH5 安装需求和相关软件支持的版本信息
- html5 touch事件实现触屏页面上下滑动(一)
- HTML5 <template>
- html5 web相关
- 如何实现一个原质化菜单项或按钮HTML5动画效果
- 从web图片裁剪出发：了解H5中的Blob
- HTML5 图片缩放功能
- HTML5扩展
- html5的几个Webapi
- HTMl5的sessionStorage和localStorage
- HTML5新特性之WebSocket
- HTML5技术学习总结
- HTML5和HTML属性及元素整理
- html5的section标签
- 关于H5里的API，上传图片预览功能
- Potato项目文档（2）
- 【Egret】实现web页面操作PC端本地文件操作
- HTML5的新特性