jquery序列帧播放(支持视频自动播放和不是全屏播放)详解编程语言

jquery序列帧播放 这个弊端就是到时候需要升级下带宽 至少10MB 保证不卡。。 ae导出序列真的时候 每秒10帧 就是代码每秒播放10张图片 尺寸适当的可以压小点

 
 <php>
 for($i=0;$i<200;$i++){
 
 if($i<10){
 $ss='00'.$i;
 }else if($i>=10 && $i<100){
 $ss='0'.$i;
 }else{
 $ss=$i;
 }
 echo'<img class="bg noshow loadimg dss" loadimg="'.$yuming.'/images/1/in_00'.$ss.'.jpg?v=2" />';
 }
 for($i=200;$i<508;$i++){
 
 if($i<10){
 $ss='00'.$i;
 }else if($i>10 && $i<100){
 $ss='0'.$i;
 }else{
 $ss=$i;
 }
 echo'<img class="bg noshow loadimg1 dss" loadimg1="'.$yuming.'/images/1/in_00'.$ss.'.jpg?v=2" />';
 } 
 </php>
 

/*用于后续加载的*/
function jiazaipic2() {
 var load_img1 = [];
 var loadimg1length = $('.loadimg1').length;
 if(loadimg1length==0){
 alert('你还没有设置loadimg1');
 return false;
 }
 $('.loadimg1').each(function() {
 var loadimg1 = $(this).attr('loadimg1');
 load_img1.push(loadimg1);
 })
 console.log(load_img1);
 window.imgNum1 = 0;
 var qq = -1;
 jQuery.imgpreload(load_img1, {
 each: function() {
 /*this will be called after each image loaded*/
 var status = $(this).data('loaded') ? 'success' : 'error';
 if (status == "success") {
 qq++;
 var v = (parseFloat(++imgNum1) / load_img1.length).toFixed(2);
 console.log(Math.round(v * 100) + "<sup>%</sup>");
 var loadimg1 = $('.loadimg1').eq(qq).attr('loadimg1');
 $('.loadimg1').eq(qq).attr('src', loadimg1)
 } else {
 alert('加载失败,重新刷新');
 window.location.reload();
 }
 },
 all: function() {
$('.jiazaicontainer').css('display', 'none');
 console.log('全部加载完成');
 /*这个地方还是要巩固下 如果万一上面有个失败*/
 $('.loadimg1').each(function() {
 var loadimg1 = $(this).attr('loadimg1');
 $(this).attr('src', loadimg1);
 })
 }
 });
}
 jiazaipic2();
 
var ii=-1;
 xuliezhenanim();
 function xuliezhenanim() {
 setTimeout(function() {
 if (ii < xuliezhennum) {
 ii++;
 if (ii > 3) {
 $('.dss').eq(ii - 1).css('display', 'none');
 }
 var img = $('.dss').eq(ii).attr('src');
 console.log(img);
 if (iskong(img)) {
 
 $('.jiazaicontainer').css('display', 'block');
 console.log('还没加载完' + ii);
 } else {
 xuliezhenanim();
 $('.dss').eq(ii).css('display', 'block');
 }
 } else {}
 }, 60)
}
 

ps:此方法不仅可以用于序列真播放还可以用在 后续加载中 全屏最好放在长拉野 不要放在全屏的H5