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

Posted 2020-11-23 newmiracle

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) + "^%");
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