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:将本窗体其他控 ...
随机推荐
- redis之spring应用
前言 读本文之前,需要大家对redis有所了解,大家可以去看一下我之前分享的redis安装及简单使用这一随笔,而本文我将跟大家分享学习一下redis与spring的集成.当然,首先需要打开我们的red ...
- 快速入门Maven(一)
一.Maven简介 1.什么是maven Apache组织中的一个颇为成功的开源项目,Maven主要服务于基于Java平台的项目构建.依赖管理和项目信息管理. 2.Maven的好处 构建是程序员每天要 ...
- Flannel的VXLAN模式工作原理
跨主机通信的一个解决方案是Flannel,由CoreOS推出,最早支持的是UDP模式,但是因为性能太差被淘汰了, 过时的UDP模式 相比两台宿主机直接通信,多出了flanneld的处理过程,发出IP包 ...
- Python_三元运算与lambda表达式
[是什么] 三元运算是if...else...的简化版,lambda表达式是函数的简化版 三元运算(三目运算) # 判断两个数中的较大者 fun(a1,a2): return a1 if a1> ...
- PHP each
1.函数的作用:遍历数组元素 2.函数参数: @params array &$array 3.例子: <?php $arr = ['Boy','Girl']; while(list($k ...
- Git上传项目至GitHub
要使用github,首先需要下载git.安装git 1.先在github上创建一个git仓库,复制该github路径 2.用cmd进入一个目录 git clone github路径 从github上直 ...
- Cocos2d-x 学习笔记(11.7) Repeat RepeatForever
1. 成员变量 Repeat: unsigned int _times; //create参数 unsigned int _total; //执行的次数 float _nextDt; //startW ...
- table表格中文字超出显示省略号
第一步: table {table-layout:fixed:}列宽由表格宽度和列宽度设定,不随文字多少变化 第二步: td { white-space:nowrap;/*文本不会换行,文本会在在同一 ...
- 浅谈爬虫 《一》 ===python
浅谈爬虫 <一> ===python ‘’正文之前先啰嗦一下,准确来说,在下还只是一个刚入门IT世界的菜鸟,工作近两年了,之前做前端的时候就想写博客来着,现在都转做python了,如果还 ...
- 05 Node.js学习笔记之发送文件数据
这章学习在NodeJs中如何将Html文件发送到客户端上,以及定义Content-Type内容类型 //1.载入http和fs模块 var http=require("http") ...