一次项目杂记续

中午到的公司，昨天加班太晚，上午调休了。项目算是顺利上线。此刻头晕脑胀。做这个项目还是留下了遗憾。如有好的建议，共同讨论。

1、因为此项目是在微信里使用，而且页面里的动画有视频的元素，无论是安卓还是IOS有一部分机型，会出现全屏播放视频的情况，那原来的震撼效果，被破坏殆尽。

说明：我已经按照查到的资料在video标签里添加了对应的属性（x-webkit-airplay="true" webkit-playsinline="true"），可以还是不起作用。（急需要解决）

2、ISO7不支持音频的相关的方法、属性，play()，currentTime等。

希望大神们多多指点。附上自己的代码

html：

<div class=" video js_video">
<video id="movie" preload="auto" poster="image/page01_bg.jpg" x-webkit-airplay="true" webkit-playsinline="true" style="width:100%; outline:none; vertical-align:baseline;">
<source type="video/mp4" src="image/movie.mp4"/>
</video>
</div>

css：

/*
* author: tianhaiting
* date: 2016-3-3
* function: animate
*/
/*reset*/
* { margin:0; padding:0; }
body, html { width:100%; height:100%; overflow:hidden; -webkit-backface-visibility: hidden; }
html { font-size:62.5%; }
body { font-family:"Microsoft YaHei"; }
input {
-webkit-tap-highlight-color:none;
-webkit-appearance:none;
outline:0;
}
section { display:block; }
img { display:block; width:100%; }
.hide { display:none; }
/*animate*/
@-webkit-keyframes fadeDownIn {
0% { opacity:0; -webkit-transform:translateY(-30px); }
100% { opacity:1; -webkit-transform:translateY(0); }
}
@-webkit-keyframes fadeRightIn {
0% { opacity:0; -webkit-transform:translateX(3rem) }
6% { opacity:1; -webkit-transform:translateX(-4rem) }
50% { opacity:1; -webkit-transform:translateX(-4rem) }
80% { opacity:.3; -webkit-transform:translateX(-6rem) }
100% { opacity:0; -webkit-transform:translateX(-10rem); }
}
@-webkit-keyframes fadeLeftIn {
0% { opacity:0; -webkit-transform:translateX(-12rem) }
6% { opacity:1; -webkit-transform:translateX(3rem) }
100% { opacity:1; -webkit-transform:translateX(0); }
}
@-webkit-keyframes fadeSmallIn {
0% { opacity:0; -webkit-transform:scale(0,0); }
100% { opacity:1; -webkit-transform:scale(1,1); }
}
@-webkit-keyframes fadeBigIn {
0% { opacity:0; -webkit-transform:scale(2,2); }
100% { opacity:1; -webkit-transform:scale(1,1); }
}
@-webkit-keyframes fadeRoundIn {
0% { opacity:0; left:0; -webkit-transform:rotateZ(0);}
1% { opacity:1; -webkit-transform:rotateZ(0); }
100% { opacity:1; left:62.5%; -webkit-transform:rotateZ(-720deg); }
}
@-webkit-keyframes fadeJzIn {
0% { opacity:0; -webkit-transform:translateX(-10rem); }
10% { opacity:1; -webkit-transform:translateX(0) rotateZ(5deg);  }
20% { opacity:1; -webkit-transform:translateX(0) rotateZ(15deg);  }
30% { opacity:1; -webkit-transform:translateX(0) rotateZ(30deg);  }
40% { opacity:1; -webkit-transform:translateX(0) rotateZ(0);  }
50% { opacity:1; -webkit-transform:translateX(0) rotateZ(15deg);  }
60% { opacity:1; -webkit-transform:translateX(0) rotateZ(0);  }
70% { opacity:1; -webkit-transform:translateX(0) rotateZ(10deg);  }
80% { opacity:1; -webkit-transform:translateX(0) rotateZ(0deg);  }
90% { opacity:1; -webkit-transform:translateX(0) rotateZ(2deg);  }
100% {opacity:1; -webkit-transform:translateX(0) rotateZ(0);  }
}
@-webkit-keyframes fadeIn {
0% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes Shake {
0% { opacity:1; -webkit-transform:rotateZ(0); }
100% { opacity:1; -webkit-transform:rotateZ(30deg); }
}
@-webkit-keyframes fadeArrow {
0% { opacity:0; -webkit-transform:translateY(0); }
100% { opacity:1; -webkit-transform:translateY(.8rem); }
}
@-webkit-keyframes fadeOut {
0% { opacity:1; }
100% { opacity:0; }
}
@-webkit-keyframes fadeJumpIn {
0% { opacity:1;  -webkit-transform:scale(.5,.5); }
100% {  opacity:1; -webkit-transform:scale(1,1); }
}
/*video*/

.video_box { position: fixed; width:100%; height:100%; top: 0; left: 0; bottom: 0; background: rgba(0,0,0,0.7); display: none; z-index: 10; }

.video_box .close { color: #fff; font-size: 3rem; position: absolute; right: .1rem; top: 0; z-index: 11; }

.video_con { margin:3rem 0 0 0; }

/*loading*/
.load_wrap { width:100%; height:100%; position:absolute; left:0; top:0; bottom:0; background:#0d1117;}

.load_percent { margin:10rem 0 0; text-align:center; font-size:3rem; color:#eeac5e; }
.load_tip { margin:2rem 0 0 0; font-size:1rem; color:#fce4a1; text-align:center; }

/*swiper*/
.global { width:100%; height:100%; position:relative; overflow:hidden; }
.layout { position:relative; overflow:hidden; height:100%; -webkit-box-sizing: border-box; box-sizing: border-box; background-repeat:no-repeat; background-position:center center; background-size:100% 100%; }
.layout .img { position:absolute; background-size:contain; background-repeat:no-repeat; background-position:center center; opacity:0; }

/*first page*/
.layout1 { background-image:url(../image/page01_bg_m.jpg) }

.layout1 .box { width:100%; height:100%; overflow:hidden; }

.layout1 .img1 { width:40.156%; height:11.354%; left:4.688%; top:3.478%; background-image:url(../image/logo.png); }

.layout1 .img2 { width:63.438%; height:73.565%; left:24.688%; top:8.87%; background-image:url(../image/role01.png); }

.layout1 .img3 { width:100%; height:100%; left:0%; top:0%; /*background-image:url(../image/glass_01.png);*/ }

.layout1 .img4 { width:13.438%; height:8.87%; left:60.938%; top:27.478%; background-image:url(../image/click.png); }

.layout1 .img5 { width:68.75%; height:27.478%; left:30.938%; top:42.435%; background-image:url(../image/big_word01.png); }

.layout1 .img6 { width:100%; height:100%; left:0%; top:0%; background-image:url(../image/page01_bg_q.jpg); }

.layout1 .img7 { width:100%; height:83.652%; left:0%; top:4%; background-image:url(../image/role02.png); }

.layout1 .img8 { width:74.375%; height:11.826%; left:13.75%; top:30.087%; background-image:url(../image/big_word02.png); }

.layout1 .img9 { width:95.313%; height:34.783%; left:4.688%; top:42.609%; background-image:url(../image/glass_02.png); }

.layout1 .img10 { width:12.813%; height:7.13%; left:62.5%; top:22.609%; background-image:url(../image/video_btn.png); }

.layout1 .arrow { width:21.253%; height:5.217%; left:39.063%; top:79.304%; background-image:url(../image/arrow.png); }

.layout1 .hit1, .layout1 .hit2, .layout1 .hit3 { opacity:1; }

.layout1 .hit1 { width:218px; height:273px; left:-110px; top:-130px; background-image:url(../image/hit1.png); }

.layout1 .hit2 { width:218px; height:205px; left:-110px; top:-100px; background-image:url(../image/hit2.png); }

.layout1 .hit3 { width:340px; height:292px; left:-170px; top:-140px; background-image:url(../image/hit3.png); }

.layout1.swiper-slide-active .img1{ -webkit-animation:fadeDownIn 1s ease-in .5s both; }

.layout1.swiper-slide-active .img2{ -webkit-animation:fadeSmallIn 1s ease-in 1.5s both; }

.layout1.swiper-slide-active .img3{ -webkit-animation:fadeSmallIn .1s ease-in 3s both; }

.layout1.swiper-slide-active .img4{ -webkit-animation:Shake 1s ease-in 2.5s infinite; }

.layout1.swiper-slide-active .img5 { -webkit-animation: fadeRightIn 1.5s ease-in 1s 1;}

.layout1.swiper-slide-active .img2 { background-image:url(../image/role01_q.png); -webkit-animation: fadeOut 1.5s ease-out 2.5s both; }

.layout1.layout1_1 .img6 { background-size:100% 100%; -webkit-animation:fadeDownIn 1s ease-in 0s both; }

.layout1.layout1_1 .img7 {  -webkit-animation:fadeLeftIn 1s ease-in 1.5s both; }

.layout1.layout1_1 .img8 {  -webkit-animation:fadeBigIn 1s ease-in 2.5s both; }

.layout1.layout1_1 .img9 {  -webkit-animation:fadeSmallIn 1s ease-in 2.5s both; }

.layout1.layout1_1 .img10 {  -webkit-animation:fadeRoundIn 1s ease-in 3.5s both; }

.layout1.layout1_1 .arrow {  -webkit-animation:fadeArrow 1.5s ease-in-out 4.5s infinite; }

.layout1 .video {position: absolute; -webkit-perspective: 1000; perspective: 1000; -webkit-transform-origin: center center; -webkit-transform: translate3d(0,0,0) scale(1,1); opacity:1; width:100%; height:100%; left:0; top:0; z-index:1; }

/*second page*/
.layout2 { background-image:url(../image/page02_bg.jpg) }

.layout2 .role{ width:58.438%; height:77.739%; left:0; top:7.826%; background-image:url(../image/page02_role.png) }

.layout2 .word{ width:63.75%; height:17.217%; left:28.438%; top:4.348%; background-image:url(../image/page02_word.png) }

.layout2 .video{ position: absolute; width:92.188%; height:28.87%; left:4.348%; top:47.826%; -webkit-perspective: 1000; perspective: 1000; -webkit-transform-origin: center center; -webkit-transform: translate3d(0,0,0) scale(1,1); }

.layout2 .video video{ width:100%; height:100%; }

.layout2 .arrow { width:21.253%; height:5.217%; left:39.063%; top:79.304%; background-image:url(../image/arrow.png); -webkit-animation:fadeArrow 1.5s ease-in-out .5s infinite; }

.layout2.swiper-slide-active .role { -webkit-animation:fadeLeftIn 1s ease-in .5s both; }

.layout2.swiper-slide-active .word { -webkit-animation:fadeBigIn 1s ease-in .5s both; }

/*third page*/
.layout3 { background-image:url(../image/page03_bg.jpg) }

.layout3 .role{ width:58.438%; height:74.783%; left:0; top:7.826%; background-image:url(../image/page03_role.png) }

.layout3 .word{ width:85.625%; height:17.739%; left:9.375%; top:4.348%; background-image:url(../image/page03_word.png) }

.layout3 .video{ position: absolute; width:92.188%; height:28.87%; left:4.348%; top:47.826%; -webkit-perspective: 1000; perspective: 1000; -webkit-transform-origin: center center; -webkit-transform: translate3d(0,0,0) scale(1,1); }

.layout3 .video video{ width:100%; height:100%; }

.layout3 .arrow { width:21.253%; height:5.217%; left:39.063%; top:79.304%; background-image:url(../image/arrow.png); -webkit-animation:fadeArrow 1.5s ease-in-out .5s infinite; }

.layout3.swiper-slide-active .role { -webkit-animation:fadeLeftIn 1s ease-in .5s both; }

.layout3.swiper-slide-active .word { -webkit-animation:fadeBigIn 1s ease-in .5s both; }

/*forth page*/
.layout4 { background-image:url(../image/page04_bg.jpg) }

.layout4 .role{ width:85.438%; height:75.652%; left:0; top:10.435%; background-image:url(../image/page04_role.png) }

.layout4 .word{ width:60.313%; height:17.043%; left:32.188%; top:4.174%; background-image:url(../image/page04_word.png) }

.layout4 .video{ position: absolute; width:92.188%; height:28.87%; left:4.348%; top:47.826%; -webkit-perspective: 1000; perspective: 1000; -webkit-transform-origin: center center; -webkit-transform: translate3d(0,0,0) scale(1,1); }

.layout4 .video video{ width:100%; height:100%; }

.layout4 .arrow { width:21.253%; height:5.217%; left:39.063%; top:79.304%; background-image:url(../image/arrow.png); -webkit-animation:fadeArrow 1.5s ease-in-out .5s infinite; }

.layout4.swiper-slide-active .role { -webkit-animation:fadeLeftIn 1s ease-in .5s both; }

.layout4.swiper-slide-active .word { -webkit-animation:fadeBigIn 1s ease-in .5s both; }

/*fifth page*/
.layout5 { background-image:url(../image/page05_bg.jpg) }

.layout5 .word{ -webkit-transform-origin:right bottom; width:62.813%; height:56.174%; left:18.75%; top:10.957%; /*background-image:url(../image/page05_word.png)*/ }

.layout5 input.btn{ display:block; background-color:transparent; border:none; width:52.5%; height:6.957%; left:23.438%; top:69.391%; background-image:url(../image/page05_Btn.png) }

.layout5.swiper-slide-active .word { -webkit-animation:fadeJzIn 2s ease-in .5s both; }

.layout5.swiper-slide-active input.btn { -webkit-animation:fadeJumpIn .8s ease-in 2.5s both 3; }

.landscapes { z-index:100; position:fixed; left:0; top:0; bottom:0; background:rgba(0,0,0,0.5); color:#fff; text-align:center; font-size:3rem; width:100%; }

@media screen and (min-width:320px) and (max-width:375px) {
.layout5 .word img{ width:82%; margin:0 auto; }
}
@media screen and (min-width:376px) and (max-width:414px) {
.layout5 .word img{ width:83%; margin:0 auto; }
}
@media screen and (min-width:415px) and (max-width:768px) {
.layout5 .word img{ width:60%; margin:0 auto; }
}
@media screen and (min-width:769px) and (max-width:1024px) {
.layout5 .word img{ width:40%; margin:0 auto; }
}

@media all and (orientation:landscape) {
.landscapes { display:block; }
}
@media all and (orientation:portrait) {
.landscapes { display:none; }
}

js：

/*
author: tiahaiting
function: jsws_red_pocket
*/
; (function (window) {

var pics = [];
var layouts = {
loadProgerss: function (pic) {
var _this = this;
var img = new Image();
var index = 0;
var len = pic.length;
var per = document.getElementById("progress");
var loadImg = function () {
img.src = pic[index];
img.onload = function () {

per.innerHTML = Math.floor((index + 1) / len * 100) + "%";
index++;
if (index < len) {
loadImg();
} else {
$(".js_load").hide();
_this.init();
}
};
img.onerror = function () {
per.innerHTML = Math.floor((index + 1) / len * 100) + "%";
index++;
if (index < len) {
loadImg();
} else {
$(".js_load").hide();
_this.init();
}
}

};
loadImg();
},
animate: function (index) {
if (index == 1) {
$(".js_show,#image").removeClass("hide");
$(".layout1").removeClass("layout1_1");
$(".hit1,.hit2,.hit3").addClass("hide");
$("#movie1")[0].play();
} else if (index == 2) {
$("#movie2")[0].play();
} else if (index == 3) {
$("#movie3")[0].play();
};
},
init: function () {

$(".global").removeClass("hide");
var context = this;
var initialSlide = 0;

context.swiper = new Swiper('body', {
wrapperClass: 'global',
slideClass: 'layout',
mode: 'vertical',
initialSlide: initialSlide,
noSwiping: true,
preventClicksPropagation: false,
onSlideChangeStart: function (swiper, direction) {
context.animate(swiper.activeIndex);
}
});
context.clickGlass();
$(".js_videoBtn").click(function () {
$(".js_video").show();
$("#bg_sound")[0].pause();
$('.video_con').html('<iframe frameborder="0" width="100%" height="100%" src="http://v.qq.com/iframe/player.html?vid=w0186hql8o8&tiny=0&auto=0" allowfullscreen></iframe>');
});
$(".close").click(function () {
$(".js_video").hide();
$('iframe').remove();
$("#bg_sound")[0].play();
});

},
clickGlass: function () {
var hitCount = 1;
var _this = this;
$(".js_click")[0].addEventListener("touchstart", function (e1) {
if (hitCount < 4) {
if (_this.getIosVersion() != 7) {
$("#hit_sound")[0].currentTime = 0;
$("#hit_sound")[0].play();
}
$(".hit" + hitCount).removeClass("hide").css("-webkit-transform", "translate3d(" + e1.touches[0].pageX + "px," + e1.touches[0].pageY + "px,0)");
} else {
//敲击结束后
hitCount = 0;
$(".js_show,#image").addClass("hide");
$(".js_video").removeClass("hide");
$("#movie")[0].play();
}

hitCount++;

});
$("#movie")[0].addEventListener("ended", function () {
$("#movie")[0].pause();
$(".js_video").addClass("hide");
$(".layout1").addClass("layout1_1");
$("#bg_sound")[0].play();

});
},
getIosVersion:function () {
var agent = navigator.userAgent.toLowerCase();
var version;
if (agent.indexOf("like mac os x") > 0) {
//ios
var regStr_saf = /os [\d._]*/gi;
var verinfo = agent.match(regStr_saf);
version = (verinfo + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");
}
var version_str = version + "";
if (version_str != "undefined" && version_str.length > 0) {
version = version.substring(0, 1);
return version
}
return false
}
};
window.layouts = layouts;

layouts.loadProgerss(pics);
})(window);

上边是部分代码，如果有问题请大家指正。。。

中午到的公司，昨天加班太晚，上午调休了。项目算是顺利上线。此刻头晕脑胀。做这个项目还是留下了遗憾。如有好的建议，共同讨论。

1、因为此项目是在微信里使用，而且页面里的动画有视频的元素，无论是安卓还是IOS有一部分机型，会出现全屏播放视频的情况，那原来的震撼效果，被破坏殆尽。

说明：我已经按照查到的资料在video标签里添加了对应的属性（x-webkit-airplay="true" webkit-playsinline="true"），可以还是不起作用。（急需要解决）

2、ISO7不支持音频的相关的方法、属性，play()，currentTime等。

希望大神们多多指点。附上自己的代码