1.判断视频
http://www.mamicode.com/info-detail-881733.html
var len,vTime; vid.onended = function() { console.log("播放完毕")
}; vid.addEventListener('loadedmetadata',function(){
$('.showLoad').css('display','none')
}); /*视频总的时长*/ vid.onloadedmetadata = function () { var vLength = vid.duration; console.log(vLength); len= (vLength*0.8); console.log(len);
}; /*视频播放进度*/ vid.ontimeupdate = function () { vTime = vid.currentTime; console.log(vTime); if(vTime >= len ){ console.log("播放超过80%")
}
};
2.h5 音频微信自动播放
http://bob.bid999.com/bob2016/wyh5
function audioAutoPlay(id){ var audio = document.getElementById(id); var play = function() {
document.removeEventListener("WeixinJSBridgeReady", play);
audio.play();
};
audio.play();
document.addEventListener("WeixinJSBridgeReady", play, false);
} audioAutoPlay('Jaudio3');
3.h5动画相关
1.动画循环
animation:play1 2s linear infinite alternate; -webkit-animation: play1 2s linear infinite alternate;
2.动画停留在最后一帧
animation: leftbox 1s linear forwards; -webkit-animation: leftbox 1s linear forwards;
3.动画示例:
平移动画
@keyframes leftbox { 0% { transform: translate(0,0); } 100% { transform: translate(700px,0); } } @-webkit-keyframes leftbox { 0% { -webkit-transform: translate(0,0); } 100% { -webkit-transform: translate(700px,0); } }
缩放动画
@keyframes btnani { 0% { transform: scale(1); } 100% { transform: scale(1.2); } } @-webkit-keyframes btnani { 0% { transform: scale(1); } 100% { transform: scale(1.2); } }
定点动画
transform-origin: 50% 100%;
旋转动画 @keyframes frameani { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } } @-webkit-keyframes frameani { 0% { -webkit-transform: rotate(0deg) } 100% { -webkit-transform: rotate(360deg) } }
向上滚动的动画 根据雪碧图定位,定时器延时更换类
-webkit-transition: 0.35s ease-in-out;
-moz-transition: 0.35s ease-in-out;
-ms-transition: 0.35s ease-in-out;
o-transition: 0.35s ease-in-out;
transition: 0.35s ease-in-out; } .two .wenzikuang .wenzi1{ background: url('../images/wenzi.png') no-repeat -73px -202px; } .two .wenzikuang .wenzi2{ background: url('../images/wenzi.png') no-repeat -84px -435px; } .two .wenzikuang .wenzi3{ background: url('../images/wenzi.png') no-repeat -75px -669px; } .two .wenzikuang .wenzi4{ background: url('../images/wenzi.png') no-repeat -75px -902px; }