一款简单的html播放器
一款简单的html播放器
优化HTML代码错误
歌曲配置在/music/js/index.js
效果图：
部分代码：
<!--
'**************************************************************************************************
' 整理作者: 黑蜘蛛博客
' 官方网站: http://4dn.net
' 联系 Q Q: 88790363
' QQ交流群：99968722
' 功能，模板，扩展，定制请联系QQ：88790363
'**************************************************************************************************
-->
<html lang="zh-cn"><head><link href="http://libs.baidu.com/fontawesome/4.2.0/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./music/player.css">
<!--css-->
<link rel="stylesheet" href="./music/css/reset.css">
<link rel="stylesheet" href="./music/css/style.css" media="screen" type="text/css">
</head><body style="background-image: url('1.jpg');background-attachment: fixed;background-repeat: no-repeat;background-size: cover;-moz-background-size: cover"><div id="wenkmPlayera">
<div id="wenkmPlayer" class="show">
<div class="player " id="aio">
<div class="music-player jp-video-270p">
<div class="info">
<div class="left">
<a href="javascript:;" class="ico-shuffle"></a>
<a href="javascript:;" class="ico-heart"></a>
</div>
<div class="center">
<div class="jp-playlist">
<ul style="display: block;"><li class=""><div><a href="javascript:;" class="jp-playlist-item-remove" style="display: none;">×</a><a href="javascript:;" class="jp-playlist-item" tabindex="1">收费播放器 <span class="jp-artist">by 黑蜘蛛</span></a></div></li><li class="jp-playlist-current"><div><a href="javascript:;" class="jp-playlist-item-remove" style="display: none;">×</a><a href="javascript:;" class="jp-playlist-item jp-playlist-current" tabindex="1">極楽浄土 <span class="jp-artist">by GARNiDELiA</span></a></div></li><li><div><a href="javascript:;" class="jp-playlist-item-remove" style="display: none;">×</a><a href="javascript:;" class="jp-playlist-item" tabindex="1">IF YOU <span class="jp-artist">by BIGBANG</span></a></div></li><li><div><a href="javascript:;" class="jp-playlist-item-remove" style="display: none;">×</a><a href="javascript:;" class="jp-playlist-item" tabindex="1">I Want You to Know <span class="jp-artist">by Zedd</span></a></div></li><li><div><a href="javascript:;" class="jp-playlist-item-remove" style="display: none;">×</a><a href="javascript:;" class="jp-playlist-item" tabindex="1">多幸运 <span class="jp-artist">by 韩安旭</span></a></div></li><li><div><a href="javascript:;" class="jp-playlist-item-remove" style="display: none;">×</a><a href="javascript:;" class="jp-playlist-item" tabindex="1">庄心妍 - 走着走着就散了 <span class="jp-artist">by 庄心妍</span></a></div></li><li><div><a href="javascript:;" class="jp-playlist-item-remove" style="display: none;">×</a><a href="javascript:;" class="jp-playlist-item" tabindex="1">Adrenaline <span class="jp-artist">by Zedd</span></a></div></li><li><div><a href="javascript:;" class="jp-playlist-item-remove" style="display: none;">×</a><a href="javascript:;" class="jp-playlist-item" tabindex="1">Cro Magnon Man <span class="jp-artist">by The Stark Palace</span></a></div></li></ul>
</div>
</div>
<div class="right">
<a href="javascript:;" class="ico-repeat"></a>
<a href="javascript:;" class="ico-share"></a>
</div>
<div class="Speed jp-seek-bar" style="width: 100%;">
<span class="jp-play-bar" style="width: 27.7473%;"></span>
</div>
</div>
<div class="controls">
<div class="current jp-current-time">01:00</div>
<div class="play-controls">
<a href="javascript:;" class="ico-previous jp-previous" title="上一首"></a>
<a href="javascript:;" class="ico-play jp-play" title="播放" style="display: none;"></a>
<a href="javascript:;" class="ico-pause jp-pause" title="暂停" style="display: inline-block;"></a>
<a href="javascript:;" class="ico-next jp-next" title="下一首"></a>
</div>
<div class="volume-level jp-volume-bar">
<span class="jp-volume-bar-value" style="width: 80%;"></span>
<a href="javascript:;" class="ico-volume-up music-loud" title="max volume"></a>
<a href="javascript:;" class="ico-volume-down music-whisper" title="mute"></a>
</div>
</div>
<div id="jquery_jplayer" class="jp-jplayer" style="width: 480px; height: 270px;"><img id="jp_poster_0" src="images/1.jpg" style="width: 480px; height: 270px; display: block;"><audio id="jp_audio_0" preload="metadata" src="http://link.im.com/163/411907897.mp3"></audio><video id="jp_video_0" preload="metadata" style="width: 0px; height: 0px;"></video></div>
</div>
</div>
<div class="switch-player" id="aiaa"><!--按钮-->
<i class="fa fa-angle-right" style="margin-top: 20px;"></i>
</div>
</div>
</div>
<!--JS-->
<script src="./music/172.js"></script>
<script src="./music/scrollbar.js"></script>
<script src="./music/player.js"></script>
<!--JS-->
<script src="./music/js/jquery.min.js"></script>
<script src="./music/js/jquery.jplayer.min.js"></script>
<script src="./music/js/jplayer.playlist.min.js"></script>
<script src="./music/js/index.js"></script>
<style>
body{
margin: 0 auto;
text-align: center;
}
.container {
max-width: 580px;
padding: 15px;
margin: 0 auto;
}
</style>
<div class="container">
<div class="header"></div></div></body></html> 需要登录才能下载
黑蜘蛛
评论
5条评论Sweet1 Lv.2 回复
666666666
北京市 移动
ndcc5 Lv.1
Chrome 103.0.0.0 
Windows 回复
感谢分享
山东省日照市 联通
MitoKohaku Lv.1
Chrome 92.0.4515.107 
Windows 回复
感谢分享
天津市河北区 联通
qwert Lv.1
Firefox 88.0 
Windows 回复
感谢分享
江苏省泰州市 电信
coolnick Lv.1
Chrome 87.0.4280.141 
Windows 回复
这个不错
亚太地区