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:将本窗体其他控 ...
随机推荐
- selenium3与Python3实战 web自动化测试框架 ☝☝☝
selenium3与Python3实战 web自动化测试框架 selenium3与Python3实战 web自动化测试框架 学习 教程 一.环境搭建 1.selenium环境搭建 Client: py ...
- django-orm框架表单的增删改查
08.14自我总结 django-orm框架 一.orm基本配置 1.创建django项目 命令行:cmd先去到django创建目录,然后输入django-admin startproject dja ...
- luogu P2210 Haywire
[返回模拟退火略解] 题目描述 一数轴上有 nnn 个点,有 nnn 个环,求一种组合方案,使得所有边长度和最小. Solution 2210\text{Solution 2210}Solution ...
- MyCat教程五:实现分库分表
本文我们来介绍下MyCat的分库分表操作 分库分表 一.分片规则介绍 在rule.xml中定义了各种myCat支持的分片规则. 取模mod-long 自然月分片 sharding-by-mon ...
- robotframework+ride+python3环境搭建
一.windows下安装python3.6 1.官网下载安装包https://www.python.org/downloads/windows/ 2.进行安装,接下来步骤一直next即可 二.cmd下 ...
- 04jmeter-Concurrency Thread Group
1.下载插件Custom Thread Groups:参照:00jmeter安装相关 2.添加并发线程组 场景举例: 10个线程2分钟的加速时间5个加速步骤持有目标速率2分钟: 即: 2分钟除以5步, ...
- Etcd安装和使用
Etcd安装和使用 一.安装 1.1 二进制安装 从这里下载: etcd-v3.2.11-linux-amd64.tar.gz 下载包后解压即可运行: # 解压 tar zxvf etcd-v3.2. ...
- FastDFS集群-安装说明
一.简介 FastDFS是一个开源的轻量级分布式文件系统,它对文件进行管理,功能包括:文件存储.文件同步.文件访问(文件上传.文件下载)等,解决了大容量存储和负载均衡的问题.特别适合以文件为载体的在线 ...
- 二叉树的查找(前序、中序、后序、层序遍历)--biaobiao88
建立一棵含有n个结点的二叉树,采用二叉链表存储: 输出前序.中序.后序..层序遍历该二叉树的遍历结果. 定义二叉树的数据类型——二叉树结点结构体BiNode.建立二叉链表可以采用扩展二叉树的一个遍历序 ...
- jedis 连接 虚拟机内redis服务
最近一直在玩关于redis集群,这个关于集群的具体设置步骤可以看这个做为参考, 我在虚拟机内建立的是一个1主3从2哨兵的模式 然后在windows环境下是配置了jedis(具体步骤可以参考这个人写的) ...