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. 索引的底层实现(B 树)

    一.B 树 1.B-Tree介绍 B-树的搜索,从根结点开始,对结点内的关键字(有序)序列进行二分查找,如果命中则结束,否则进入查询关键字所属范围的儿子结点:重复,直到所对应的儿子指针为空,或已经是叶 ...

  2. spring5 源码深度解析----- 被面试官给虐懵了,竟然是因为我不懂@Configuration配置类及@Bean的原理

    @Configuration注解提供了全新的bean创建方式.最初spring通过xml配置文件初始化bean并完成依赖注入工作.从spring3.0开始,在spring framework模块中提供 ...

  3. 配置VC++2010的glut库

    VC++2010是一个成熟稳定的版本,微软的编译工具Visual Studio系列从VC6到如今的VC2019,功能非常强大,我们在开始学习C++和计算机图形学的时候,一般入手<<C++P ...

  4. 线程池和lambda表达式

    线程池1.什么是线程池.一个用来创建和管理线程的容器;2.线程池的作用.提高线程的复用性,降低资源消耗提高线程的响应速度,提高线程的可管理性3.线程的核心思想;线程的复用 4.线程池的创建Execut ...

  5. 深入理解 web 协议(一)- http 包体传输

    本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/WlT8070LlrnSODFRDwZsUQ作者:吴越 开坑这个系列的原因,主要是在大前端学习的 ...

  6. Vue的介绍及安装和导入

    08.27自我总结 Vue的介绍及安装和导入 本质就是封装一些js 一Vue的介绍 进式 JavaScript 框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式 ...

  7. RF中的if判断

    关键字run keyword if 格式如下: Run Keyword If  判断条件   其他关键字 ...      ELSE IF    判断条件   其他关键字 ...    ELSE   ...

  8. 面试必备:高频算法题终章「图文解析 + 范例代码」之 矩阵 二进制 + 位运算 + LRU 合集

    Attention 秋招接近尾声,我总结了 牛客.WanAndroid 上,有关笔试面经的帖子中出现的算法题,结合往年考题写了这一系列文章,所有文章均与 LeetCode 进行核对.测试.欢迎食用 本 ...

  9. linux系统取证

    目录 0x00 查看系统信息 0x01 用户及组信息 0x02 防火墙及路由信息 0x03 查看网络.端口信息 0x04 系统运行信息查看 0x05 日志查看分析 0x00 查看系统信息 name-a ...

  10. Angular/Vue多复选框勾选问题

    此页面效果以Angular实现,Vue也可按照其大致流程实现,其核心本质没有改变. 功能效果为:页面初始化效果为要有所有角色的复选框,要求初始化默认勾选的角色要显示勾选,之后,能按照最终勾选的状态提交 ...