html视频鼠标移除不播放,html - 在Mouseover上播放Gif并在鼠标移除时暂停Gif而不替换图像? - 堆栈内存溢出...
所以,我想了一下......你可以做这样的酷事:
首先,将您的gif分解为多个图像,然后使用css关键帧为它们设置动画。
#faux-gif {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
margin: auto;
background-image: url(http://i.imgur.com/E2ee6fI.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
width: 300px;
height: 300px;
/* animation: giffy 0.5s infinite linear; */
/* no fade between frames */
animation: giffy 0.5s infinite steps(1);
}
#faux-gif:hover {
animation-play-state:paused;
}
@keyframes giffy {
0% { background-image: url('http://i.imgur.com/E2ee6fI.gif'); }
15% { background-image: url('http://i.imgur.com/JIi0uul.gif'); }
30% { background-image: url('http://i.imgur.com/owNGnNN.gif');}
45% { background-image: url('http://i.imgur.com/2Ii6XOz.gif'); }
60% { background-image: url('http://i.imgur.com/ZmQBrQ5.gif'); }
75% { background-image: url('http://i.imgur.com/iAsfHyY.gif'); }
90% { background-image: url('http://i.imgur.com/AJwRblj.gif'); }
100% { background-image: url('http://i.imgur.com/fx5wUNY.gif'); }
}
JavaScript版本......没有经过彻底的测试,但这是基本的想法。
window.onload = function() {
function FauxGif(element, frames, speed) {
this.currentFrame = 0,
this.domElement = element,
this.frames = frames || null,
this.speed = speed || 200;
this.interval;
this.init();
}
FauxGif.prototype = {
init: function() {
// set the first one to the first image
console.log(this.frames[0])
this.domElement.style.backgroundImage = "url(" + this.frames[0] + ")";
},
pause: function() {
clearInterval(this.interval);
},
resume: function() {
var that = this;
that.interval = setInterval(function(){
that.currentFrame < that.frames.length - 1 ? that.currentFrame++ : that.currentFrame = 0;
that.domElement.style.backgroundImage = "url(" + that.frames[that.currentFrame] + ")";
}, this.speed);
}
}
var frames = [
'http://i.imgur.com/E2ee6fI.gif',
'http://i.imgur.com/JIi0uul.gif',
'http://i.imgur.com/owNGnNN.gif',
'http://i.imgur.com/2Ii6XOz.gif',
'http://i.imgur.com/ZmQBrQ5.gif',
'http://i.imgur.com/iAsfHyY.gif',
'http://i.imgur.com/AJwRblj.gif',
'http://i.imgur.com/fx5wUNY.gif'
]
var elem = document.querySelector('#faux-gif'),
gif = new FauxGif(elem, frames);
elem.addEventListener('mouseenter', function(){
gif.resume()
});
elem.addEventListener('mouseleave', function() {
gif.pause();
});
}
html视频鼠标移除不播放,html - 在Mouseover上播放Gif并在鼠标移除时暂停Gif而不替换图像? - 堆栈内存溢出...相关推荐
- linux播放到设备,linux - 将字节流式传输到ALSA播放设备 - 堆栈内存溢出
我在使用libasound将随机字节写入ALSA播放设备时遇到了很多麻烦. 最终,我的目标是能够通过网络路由回放流并让它在远程设备上播放. 此问题中提供的代码将WAV文件读入内存并通过snd_pcm_ ...
- html播放mov格式视频,video - ffmpeg将mov文件转换为mp4,用于HTML5视频标签IE9 - 堆栈内存溢出...
对于ffmpeg : ffmpeg -i {input}.mov -vcodec h264 -acodec aac -strict -2 {output}.mp4 您还可以添加-q:v / -q:a参 ...
- linux usb音频,audio - 如何从linux USB捕获设备捕获与ffmpeg同步的音频和视频 - 堆栈内存溢出...
我正在通过USB Terratec Grabster AV350(基于em2860芯片)捕获视频. 播放时我没有成功获取音频. 如果我使用vlc或ffplay播放捕获的视频,我只有3秒钟的声音,然后对 ...
- html flash音乐播放器代码,网页上播放mp3或flash等播放器代码
复制代码代码如下: style="cursor:hand"> style="cursor:hand"> 附一: 控制播放器控件 media play ...
- 电脑桌面没有计算机图标鼠标也点不起来,为什么我的电脑桌面上的图标有时用鼠标怎么点也没反应呀?...
匿名用户 1级 2016-03-28 回答 System Volume Information System Volume Information"文件夹,中文名称可以翻译为"系统 ...
- iphone4 base64 mp3 无法解析 html5,javascript - 如何使用HTML5在firefox上播放base64音频数据? - 堆栈内存溢出...
我正在尝试编码base64格式的mp3文件. 然后通过broswer播放. 它适用于safari和chrome,但不适用于Firefox . 我的问题是"有没有办法让firefox以base ...
- python opencv 录制视频_python - 使用Opencv Python多线程录制视频 - 堆栈内存溢出
我认为您的工作方向正确,但是我无法使用您的代码保存文件. 这是一个使用多线程获取帧的视频流到视频小部件. 每个摄像机流都有两个线程: 线程#1-专用于仅读取摄像机流中的帧. 线程#2-专用于处理帧(显 ...
- python音频 降噪_python - 使用pyaudio对音频播放进行降噪 - 堆栈内存溢出
我正在用Python为Raspberry Pi写一个声码器,这使声音无法识别. 我录制音频并使用回调功能实时播放-它可以工作. 现在,我需要对输入进行去噪,以Numpy数组表示(像大多数教程和SO上的 ...
- libvlc获取一帧_android - 从android vlc媒体播放器获取当前帧 - 堆栈内存溢出
我找到了一个非常简单,非常快速的解决方案. 只需使用TextureView而不是SurfaceView ,然后在使用getBitmap()函数播放时随时检索图像,如下所示. public class ...
最新文章
- gitflow分支管理模型
- DeepID2+:Deeply Learned Attributes for Crowded Scene Understanding
- Spring-web源码解析之Filter-AbstractRequestLoggingFilter
- LeetCode(235)——二叉搜索树的最近公共祖先(JavaScript)
- 6467t 1080php,DM6467T开发板领航——开发环境的文件配置
- 如何把 Google adsense 的广告放到博客的Banner位置
- 伍楼阁使用的WordPress代码高亮插件使用说明
- Unity开发游戏时可以用到的一些插件介绍
- 微信小程序开挂模式即将启动
- 【springcloud问题】Could not locate PropertySource and the fail fast property is set, failing
- 在顺丰的历史上,扩大规模的资金来源
- 存储器国产化为何选3D NAND作为突破口?
- Iperf测试能ping通,测试带宽失败
- 简单的视频压缩大小技巧来了,小白也能轻松上手
- BI技巧丨近两年及当年月份数据汇总
- xampp mysql远程连接_XAMPP mysql远程连接
- Chapter5.2:频率响应法
- Pandas - Review
- 【SpringBooot报错】eld redisTemplate in com.buba.utils.RedisUtils required a bean of type
- 《编程之美》1.4 买书问题 贪心法则