jquery序列帧播放,支持视频自动播放和不是全屏播放

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

<pre>

<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>

</pre>

<pre>

/*用于后续加载的*/

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)

}

</pre>

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