使用的工具——gifplayer
基本用法：
1.安装
git clone https://github.com/rubentd/gifplayer.git
2.添加一张gif预览的图片
<img class="gifplayer" src="images/loud.png"/>
3.在预览图片的目录下增加一个文件名相同的gif文件
4.引入jquery.js ,从下载的包中找到目录gifplayer/dist/目录下引入jquery.gifplayer.js文件
使用下面JS脚本来对gifplayer进行控制
$(function(){
//第一步，先初始化gifplayer
var gifplayer = $('.gifplayer').gifplayer({
label:"",//把label置空，不然会出现gif字样
});
//使用下面代码播放gif
gifplayer.gifplayer("play");
//使用下面代码停止gif
gifplayer.gifplayer("stop");
})
你可以点击查看demo
完成的html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>gif test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style type="text/css">
body{
margin:0;
padding:0;
}
</style>
<!-- <link rel="stylesheet" href="css/gifplayer.css"> -->
</head>
<body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.gifplayer.js"></script>
<img class="gifplayer" src="images/loud.png"/>
<button class="control">播放</button>
<script>
$(function(){
var gifplayer = $('.gifplayer').gifplayer({
label:"",
});
var played = false;
$('.control').on('click',function(){
if(!played){
gifplayer.gifplayer("play");
played = true;
}else{
gifplayer.gifplayer("stop");
played = false;
}
});
})
</script>
</body>
</html>