下载鸥 > 网站下载 > 开发教程 > JS/JQuery

移动端加载序列化图片实现伪视频播放

176 2022-08-12 02:10:31

收藏
客户对于视频是有执念的,很多客户喜欢将banner图用视频做背景。pc端自然没有问题,但移动端却有不小的问题。

因为,大多数型号的手机端视频是不允许自动播放的,这个时候,就只能通过序列化加载图片的方式实现自动播放。
 

js序列化加载图片实现自动播放

var store = {
    length: 47,
    1: img1,
    2: img2,
    ...
    47: img47   
};
 
var index = 1;
container.innerHTML = '';
// 依次append图片对象
var step = function () {
    if (store[index - 1]) {
        container.removeChild(store[index - 1]);
    }   
    container.appendChild(store[index]);
    // 序列增加
    index++;
    // 如果不超过最大限制,播放下一帧
    if (index <= 47) {
        // 42是按照每秒24帧计算的值
        setTimeout(step, 42);
    }
};
step();

这样,我们就通过序列化图片的方式,实现了手机端视频的自动播放。

本文地址:https://xzo.com.cn/develop/js/1104.html

有帮助,很赞!

信息来源:下载鸥
信息标签
导出教程 下载word版教程
发表评论 共有条评论
关于JS/JQuery


JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

JavaScript十分强大,不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理,都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中。

推荐JS/JQuery开发教程
JavaScript过滤XSS攻击方法
JavaScript过滤XSS攻击方法

什么是XSS?XSS(Cross Site Scripting),跨站脚本攻击,是一种允许攻击者在另外一个...

1 257
JS验证手机是否11位的做法
JS验证手机是否11位的做法

在网站表单提交前,我们往往需要验证一下信息避免错误数据,那么,怎样验证手机号...

1 308
jQuery怎样监听鼠标滚动是向上还是向下的状态?
jQuery怎样监听鼠标滚动是向上还是向下的状态?

知乎鼠标向下滚动显示文章标题,向上滚动显示栏目;又或者向下滚动到底部时异步...

0 433
jquery怎样获取textarea用户输入的行数?
jquery怎样获取textarea用户输入的行数?

jQuery是一个相当好用的js插件,通过jquery我们可以实现很多功能,例如今天要介...

0 429
swiper轮播图空白案例记录
swiper轮播图空白案例记录

今天鸥哥在用swiper做轮播图时,轮播效果虽然没问题,但只显示第一张,后面的图片...

0 273
JS控制输入字数的两个方案
JS控制输入字数的两个方案

我们在文章输入框中经常有用到字数控制,但字数控制有两种方案,一种是字母/空...

0 289
JS判断苹果iPhone与iPad、安卓设备类型适配
JS判断苹果iPhone与iPad、安卓设备类型适配

在网站开发的过程中,一些涉及到资源下载的网站会通过判断不同系统手机来展示...

3 515
JS获取浏览器语言(中英文多语言站)并自动跳转代码
JS获取浏览器语言(中英文多语言站)并自动跳转代码

如果是多语言站点,主动获取浏览器默认语言并自动进行跳转可以有效降低跳出率...

0 738
随机JS/JQuery开发教程
css实现图片从左到右滑入并淡入的特效
css实现图片从左到右滑入并淡入的特效

如果直接通过css3的left属性,实现的滑动效果并不丝滑。此时,如果给图片加入父...

0 186
swiper.js轮播时自动切换对应信息模块
swiper.js轮播时自动切换对应信息模块

swiper是一款非常好用的兼容pc+手机端轮播插件。大多数时候,如果要做视觉切...

0 159
CSS3怎样简单实现循环旋转效果?
CSS3怎样简单实现循环旋转效果?

css3动画已经走进了大大小小的网站,曾经只能用js实现的动画,也可以通过css3实...

0 171
键盘左右键进行上一页下一页翻页
键盘左右键进行上一页下一页翻页

上一页下一页按钮如果用鼠标点击,由于位置一直变化,体验不是很好。今天鸥哥就...

0 224
animate.css在线调试,支持直接复制样式名
animate.css在线调试,支持直接复制样式名

animate.css在线调试,支持直接复制样式名...

0 337
怎样用css3让多行文字垂直居中于父元素?
怎样用css3让多行文字垂直居中于父元素?

我们都知道,css属性vertical-align:middle的作用是垂直居中。但前提是单行文...

0 182
jQuery点击按钮触发表单提交
jQuery点击按钮触发表单提交

在常见的form表单中,我们可以通过button进行表单提交,也可以使用input提交,此...

0 217
js判断图片加载失败时自动显示默认图片onerror
js判断图片加载失败时自动显示默认图片onerror

页面图片加载失败是一个比较常见的bug,图片位置挪动、图片服务器过期、链接...

0 215
客服QQ:341553759
点击咨询 常见问题 >
官方交流群:90432500
点击加入