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
jquery序列帧播放(支持视频自动播放和不是全屏播放)的更多相关文章
- iOS 全局禁止横屏,但UIWebView 全屏播放视频,横屏,解决办法(任意页面横竖屏或禁止)
		
iOS 全局禁止横屏,但UIWebView 全屏播放视频,横屏,解决办法 时间 2015-07-14 20:59:00 博客园-原创精华区 原文 http://www.cnblogs.com/fe ...
 - h5页面自动播放视频、音频_关于媒体文件自动全屏播放的实现方式
		
在移动端(ios和android)播放视频的时候,我们即使定义了autoplay属性,仍然不能自动播放.这是由于手机浏览器为了防止浪费用户的网络流量,在默认情况下是不允许媒体文件自动播放的,除非用户自 ...
 - iphone H5视频行内播放(禁止全屏播放)
		
一般用户都知道,ios在网页点击视频播放时,视频会弹出全屏播放框. video标签的playsinline.webkit-playsinline标记根本就不会起作用. 还有传闻说对于没有声音的视频不会 ...
 - [转]Android WebView播放视频(包括全屏播放),androidwebview
		
Android WebView播放视频(包括全屏播放),androidwebview 最近项目开发中用到了WebView播放视频的功能,总结了开发中犯过的错误,这些错误在开发是及容易遇到的,所以我这里 ...
 - audio与video控件/标签的隐藏,iso/Android下自动全屏播放,短暂黑屏问题
		
(一)audio音频标签 <audio src="xxx.mp3"></audio> (二)video视频标签 <video src="xx ...
 - iOS APP 中H5视频默认全屏播放问题解决
		
问题描述:在Android中,视频可以正常在H5页面局部播放,iOS中则自动切换至全屏模式. 查看资料得以解决,20190301记录下来. 解决方法:IOS10及以后,在 video标签页中只包含 w ...
 - video视频标签一些设置,包括封面、播放结束后的封面、视频占满屏幕的方式、视频播放暂停、展示控制栏、触发全屏播放事件
		
video视频标签一些设置,包括封面.播放结束后的封面.视频占满屏幕的方式.视频链接.视频播放暂停.展示控制栏.触发全屏播放事件 <video id="video" auto ...
 - video自动全屏播放
		
video自动全屏播放 关于Screen.lockOrientation() https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockO ...
 - 【wpf基础】wpf MediaElement全屏播放视频功能
		
最近在研究如何将视频全屏播放,一开始思路A:弹窗将MediaElement对象add到一个新的全屏窗体,报错 指定的元素已经是另一个元素的逻辑子元素.请先将其断开连接. 后续转换思路B:将本窗体其他控 ...
 
随机推荐
- 索引的底层实现(B 树)
			
一.B 树 1.B-Tree介绍 B-树的搜索,从根结点开始,对结点内的关键字(有序)序列进行二分查找,如果命中则结束,否则进入查询关键字所属范围的儿子结点:重复,直到所对应的儿子指针为空,或已经是叶 ...
 - spring5 源码深度解析----- 被面试官给虐懵了,竟然是因为我不懂@Configuration配置类及@Bean的原理
			
@Configuration注解提供了全新的bean创建方式.最初spring通过xml配置文件初始化bean并完成依赖注入工作.从spring3.0开始,在spring framework模块中提供 ...
 - 配置VC++2010的glut库
			
VC++2010是一个成熟稳定的版本,微软的编译工具Visual Studio系列从VC6到如今的VC2019,功能非常强大,我们在开始学习C++和计算机图形学的时候,一般入手<<C++P ...
 - 线程池和lambda表达式
			
线程池1.什么是线程池.一个用来创建和管理线程的容器;2.线程池的作用.提高线程的复用性,降低资源消耗提高线程的响应速度,提高线程的可管理性3.线程的核心思想;线程的复用 4.线程池的创建Execut ...
 - 深入理解 web 协议(一)- http 包体传输
			
本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/WlT8070LlrnSODFRDwZsUQ作者:吴越 开坑这个系列的原因,主要是在大前端学习的 ...
 - Vue的介绍及安装和导入
			
08.27自我总结 Vue的介绍及安装和导入 本质就是封装一些js 一Vue的介绍 进式 JavaScript 框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式 ...
 - RF中的if判断
			
关键字run keyword if 格式如下: Run Keyword If 判断条件 其他关键字 ... ELSE IF 判断条件 其他关键字 ... ELSE ...
 - 面试必备:高频算法题终章「图文解析 + 范例代码」之 矩阵 二进制 + 位运算 + LRU 合集
			
Attention 秋招接近尾声,我总结了 牛客.WanAndroid 上,有关笔试面经的帖子中出现的算法题,结合往年考题写了这一系列文章,所有文章均与 LeetCode 进行核对.测试.欢迎食用 本 ...
 - linux系统取证
			
目录 0x00 查看系统信息 0x01 用户及组信息 0x02 防火墙及路由信息 0x03 查看网络.端口信息 0x04 系统运行信息查看 0x05 日志查看分析 0x00 查看系统信息 name-a ...
 - Angular/Vue多复选框勾选问题
			
此页面效果以Angular实现,Vue也可按照其大致流程实现,其核心本质没有改变. 功能效果为:页面初始化效果为要有所有角色的复选框,要求初始化默认勾选的角色要显示勾选,之后,能按照最终勾选的状态提交 ...