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

jquery序列帧播放(支持视频自动播放和不是全屏播放)的更多相关文章

  1. iOS 全局禁止横屏,但UIWebView 全屏播放视频,横屏,解决办法(任意页面横竖屏或禁止)

    iOS 全局禁止横屏,但UIWebView 全屏播放视频,横屏,解决办法 时间 2015-07-14 20:59:00  博客园-原创精华区 原文  http://www.cnblogs.com/fe ...

  2. h5页面自动播放视频、音频_关于媒体文件自动全屏播放的实现方式

    在移动端(ios和android)播放视频的时候,我们即使定义了autoplay属性,仍然不能自动播放.这是由于手机浏览器为了防止浪费用户的网络流量,在默认情况下是不允许媒体文件自动播放的,除非用户自 ...

  3. iphone H5视频行内播放(禁止全屏播放)

    一般用户都知道,ios在网页点击视频播放时,视频会弹出全屏播放框. video标签的playsinline.webkit-playsinline标记根本就不会起作用. 还有传闻说对于没有声音的视频不会 ...

  4. [转]Android WebView播放视频(包括全屏播放),androidwebview

    Android WebView播放视频(包括全屏播放),androidwebview 最近项目开发中用到了WebView播放视频的功能,总结了开发中犯过的错误,这些错误在开发是及容易遇到的,所以我这里 ...

  5. audio与video控件/标签的隐藏,iso/Android下自动全屏播放,短暂黑屏问题

    (一)audio音频标签 <audio src="xxx.mp3"></audio> (二)video视频标签 <video src="xx ...

  6. iOS APP 中H5视频默认全屏播放问题解决

    问题描述:在Android中,视频可以正常在H5页面局部播放,iOS中则自动切换至全屏模式. 查看资料得以解决,20190301记录下来. 解决方法:IOS10及以后,在 video标签页中只包含 w ...

  7. video视频标签一些设置,包括封面、播放结束后的封面、视频占满屏幕的方式、视频播放暂停、展示控制栏、触发全屏播放事件

    video视频标签一些设置,包括封面.播放结束后的封面.视频占满屏幕的方式.视频链接.视频播放暂停.展示控制栏.触发全屏播放事件 <video id="video" auto ...

  8. video自动全屏播放

    video自动全屏播放 关于Screen.lockOrientation() https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockO ...

  9. 【wpf基础】wpf MediaElement全屏播放视频功能

    最近在研究如何将视频全屏播放,一开始思路A:弹窗将MediaElement对象add到一个新的全屏窗体,报错 指定的元素已经是另一个元素的逻辑子元素.请先将其断开连接. 后续转换思路B:将本窗体其他控 ...

随机推荐

  1. Java工程师学习指南(完结篇)

    Java工程师学习指南 完结篇 先声明一点,文章里面不会详细到每一步怎么操作,只会提供大致的思路和方向,给大家以启发,如果真的要一步一步指导操作的话,那至少需要一本书的厚度啦. 因为笔者还只是一名在校 ...

  2. Hyper-V 下linux虚拟机静态IP上网配置的两种方式(2)

    工作需要,搭建linux环境,网上搜了两种Hyper-V配置linux静态IP及上网的方式,记录一下,方便查阅,如下设置网络共享方式: win10下使用hyper-v在本机安装linux虚拟机后,网络 ...

  3. Numpy中的三个常用正态分布相关的函数,randn,standard_normal, normal的区别

    这三个函数都可以返回随机正态分布(高斯Gaussian 分布)的数组,都可以从numpy.random中导出 先看三个函数的参数方式: randn: randn(d0, d1, ..., dn), 返 ...

  4. .NET北京俱乐部,技术的饕餮盛宴,不枉此行

    在19年年尾,我们相约于.NET北京俱乐部 DNT精英论坛暨.NET北京俱乐部是由资深.NET专家和社区活跃分子发起的技术论坛,以“分享.成长.合作.共赢”为原则,致力于打造一个领先的技术分享平台和成 ...

  5. socat的介绍与使用

    Socat 是 Linux 下的一个多功能的网络工具,名字来由是 「Socket CAT」.其功能与有瑞士军刀之称的 Netcat 类似,可以看做是 Netcat 的加强版. Socat 的主要特点就 ...

  6. html、css、javascript之间的关系

    网页主要由三部分组成: 结构( Structure) . 表现( Presentation) 和行为( Behavior)HTML —— 结构, 决定网页的结构和内容( “是什么”)CSS —— 表现 ...

  7. Pycharm中Python Console与Terminal的区别

    1.Python Console是Python交互式模式,可以直接输入代码,然后执行,并立刻得到结果 2.Terminal是命令行模式,与系统的CMD(命令提示符)一样,可以运行各种系统命令

  8. javascript学习总结之Object.assign()方法详解

    最近再写ES6的文章时候发现自己对Object.assign()方法不太了解,之前也没有接触过所以就就查阅了相关的资料,为了自己以后肯能会用到以及对知识进行巩固,所以在这里记录下自己学习的点点滴滴,毕 ...

  9. 玩转u8g2 OLED库,一篇就够

    授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享给你周边需要的朋友或者同学,说不定大神成长之路有博哥的奠基石... QQ技术互动交流群:ESP8266&3 ...

  10. thinkcmf5 支付宝接口操作

    这是我自己摸索再结合网上搜索的一大堆内容搞出来的,官方的文件对于新手来说很难理解,什么文件放什么位置,该怎么引用,都要一一尝试,我这就直接列出来了,照样放就是了.同样适用于tp5,我这个也是tp5的 ...